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?
TL;DR
- Create 100vh outer sections and place inner scrollable containers inside each, setting overflow to auto.
- Ensure inner containers have enough content to scroll, preventing outer scroll until inner scroll completes, and optionally use fullpage.js for section snapping without affecting inner scroll areas.
To create a two-level scrolling system in Webflow—where users scroll between full-screen sections, and also scroll within the content of each section—you need to separate outer (section-to-section) and inner (content within a section) scroll behavior.
1. Structure Your Page with Full-Height Sections
- Add Div Blocks for each major section, and set them to 100vh height.
- These Div Blocks represent your "outer scroll" areas—each one fills the screen and stacks vertically as users scroll down the page.
2. Add Scrollable Content Containers
- Inside each 100vh section, add another Div Block (e.g.,
scrollable-content). - Set height to 100% and apply
overflow: autooroverflow-y: scroll. This enables vertical scrolling inside the section without affecting the page scroll. - Avoid adding padding to the parent section that will overflow the content; apply padding to the inner scrollable div instead.
3. Prevent Scroll Hijacking Between Inner and Outer Scroll
- Be aware that Webflow doesn’t natively distinguish scroll limits. When a user scrolls past the inner content, it continues scrolling the page.
- To better control behavior:
- Add enough content inside the scrollable div so it requires scrolling.
- Scroll behavior will naturally “pause” at the inner div until fully scrolled, then resume outer scrolling.
4. Optional: Use Fullpage.js for Enhanced Section Scrolling
- Webflow doesn't support section snap-scrolling natively. If you want automatic snapping between sections (while still allowing internal scroll), integrate fullpage.js via custom code.
- Make sure to exclude scrollable inner containers when setting fullpage.js options (e.g., set
scrollOverflow: true).
5. Test on Different Devices
- Mobile browsers often handle nested scrolling differently. Test in both desktop and mobile views to ensure scroll behavior functions as expected.
- You may need to tweak heights or disable overflow behaviors on smaller screens.
Summary
To separate section navigation and in-section scrolling in Webflow, use 100vh outer sections with inner scrollable containers set to overflow: auto. This enables a clean two-level scroll experience where users can move between full-screen sections and scroll within them independently.