What is the simplest method to separate the scrolling action of a section and its content in Webflow for the purpose of creating a two-level scrolling system, where users can navigate between sections and scroll within them?

To create a two-level scrolling system in Webflow—where users scroll between full-page sections, and also scroll within each section’s content—you need to isolate scrolling behavior per section. Here's the simplest method using Webflow's native tools.

1. Structure Your Sections Correctly

• Create a parent container (e.g., a div) for each full-screen section.
• Set each section’s height to 100vh (100% of the viewport height) so they stack vertically.
• Place the scrollable content inside this fixed-height section.

2. Enable Inner Content Scrolling

• Select the inner content container inside your section.
• Set its Overflow to Auto or Scroll in the Layout settings.
• Set a fixed Height (e.g., 100%) so only the inner box scrolls, not the entire page.

3. Disable Overflow on Outer Section (if needed)

• Ensure your section’s overflow is set to Hidden if you want to prevent the inner scrolling from impacting outer flow.

4. Smooth Scroll Between Sections (Optional)

• Use Webflow Interactions or basic anchor link navigation to scroll between sections.
• You can add ID tags to each section and use "Scroll to Element" interactions or links to target those sections.

5. Prevent Scroll Hijacking Conflicts

• Avoid using Page-level scroll snap or Scroll Snap CSS if you want more control.
• If you use scroll snapping, set scroll-snap-type: y mandatory on the body or parent container, and scroll-snap-align: start on each section.

Summary

To separate section scrolling from content scrolling in Webflow, create 100vh sections with independent scrollable containers inside, using overflow settings to manage scroll behavior. This setup creates a clean two-level scroll system using only Webflow’s native controls.