Comment bloquer le scroll de la page dans Webflow avec Finsweet Scroll Lock ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment empêcher le scroll de la page avec Finsweet Attributes Scroll Lock, utile pour les modals et menus mobiles.

1. Ajoutez le script dans le head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-scrolllock@1/scrolllock.js" defer>script>

2. Configurez le déclencheur au clic

Sur le bouton qui ouvre votre modal ou menu, ajoutez :

• fs-scrolllock-element="trigger"
• fs-scrolllock-event="click"
• fs-scrolllock-lock="true" (pour verrouiller le scroll)

Sur le bouton de fermeture, ajoutez les mêmes attributs avec fs-scrolllock-lock="false".

3. Configurez le déclencheur à la visibilité

Pour verrouiller le scroll automatiquement quand un élément devient visible (ex: une modal qui s'ouvre via une Interaction Webflow), utilisez fs-scrolllock-event="visible" sur l'élément modal lui-même. Finsweet détecte sa visibilité et verrouille/déverrouille automatiquement.

4. Ciblez un conteneur spécifique (optionnel)

Par défaut, Scroll Lock verrouille le scroll du body entier. Pour verrouiller le scroll d'un conteneur spécifique (ex: une sidebar), ajoutez fs-scrolllock-target="#mon-conteneur".

Conclusion

Scroll Lock évite le scroll de fond lors de l'ouverture des overlays. Cas d'usage :

• Modals et popups qui s'ouvrent sur la page
• Menu mobile plein écran
• Drawers et sidebars