How to Lock Page Scrolling in Webflow with Finsweet Scroll Lock

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to prevent page scrolling with Finsweet Attributes Scroll Lock, handy for modals and mobile menus.

1. Add the script in the head

2. Set up the click trigger

On the button that opens your modal or menu, add:

• fs-scrolllock-element="trigger"
• fs-scrolllock-event="click"
• fs-scrolllock-lock="true" (to lock scrolling)

On the close button, add the same attributes with fs-scrolllock-lock="false".

3. Set up the visibility trigger

To lock scrolling automatically when an element becomes visible, for example, a modal opened through a Webflow Interaction, use fs-scrolllock-event="visible" on the modal element itself. Finsweet detects when it appears and locks or unlocks scrolling automatically.

4. Target a specific container (optional)

By default, Scroll Lock locks scrolling on the entire body. To lock scrolling on a specific container, for example, a sidebar, add fs-scrolllock-target="#mon-conteneur".

Conclusion

Scroll Lock prevents background scrolling when overlays open. Use cases:

• Modals and popups that open on the page
• Full-screen mobile menu
• Drawers and sidebars