Can Webflow be used to create a scroll-triggered action where the next section comes up to the top when scrolling the mouse?
TL;DR
- Set scroll container’s overflow to scroll/auto, height to 100vh, and apply scroll-snap-type: y mandatory.
- Set each section’s height to 100vh and apply scroll-snap-align: start for clean viewport snapping.
- Optionally add scroll-behavior: smooth for smoother transitions between sections.
Yes, Webflow can create scroll-triggered actions where the next section scrolls to the top—often called “snap scrolling” or “scroll snapping.” This can be done using native Webflow settings combined with standard CSS scroll snap properties.
1. Enable Scroll Snapping in Webflow
- Select the Section or Wrapper that contains your scrollable content (typically the
bodyor a full-page container). - In the Style panel, set:
- Overflow to scroll or auto (usually on a vertical axis).
- Height to 100vh to ensure each section takes up one full viewport height.
- Under the Layout section, add custom CSS using an Embed Component or Page Settings:
- Add
scroll-snap-type: y mandatory;to the parent container. - For each child section, add
scroll-snap-align: start;.
2. Structure Your Page for Snapping
- Each section must be 100vh in height so scroll snapping aligns at clean viewport breaks.
- Use Webflow’s Section element or a
divwith 100vh height applied. - Apply scroll-snap-align: start; to each scrollable section using a combo class or custom attribute.
3. Optional: Add Smooth Scrolling
- In the custom code area (Page Settings > Inside
<style>tags), you can apply: scroll-behavior: smooth;to the scroll wrapper to enable automatic smooth scrolling.- This enhances the experience when users use keyboard arrows or trackpads.
4. Compatibility and Limitations
- Most modern browsers support CSS scroll snapping, but performance may vary slightly on mobile browsers.
- Webflow does not natively support scroll jacking (i.e., forcing scroll to the next section on scroll-wheel trigger) but CSS scroll snap offers a user-friendly compromise without JavaScript or custom code.
Summary
Webflow supports scroll-triggered snapping using CSS scroll snap. Set each section to 100vh, apply scroll-snap-type to the container, and use scroll-snap-align: start on each section to make the next section align to the top when scrolling.