Comment bloquer le scroll de la page dans Webflow avec Finsweet Scroll Lock ?
Apprenez à bloquer le scroll de la page dans Webflow avec Finsweet Scroll Lock : déclencheur clic, visibilité et cible.
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.
| Attribut | Élément | Valeur |
|---|---|---|
| fs-scrolllock-element | Élément déclencheur | trigger |
| fs-scrolllock-event | Élément déclencheur | click ou visible |
| fs-scrolllock-lock | Élément déclencheur | true ou false |
| fs-scrolllock-target | Élément déclencheur | Sélecteur CSS de l'élément scrollable (par défaut: body) |
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
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
