Stop the page from scrolling when someone opens a modal.
View demo projectCréation du scénario Make.com
1. Téléchargez le modèle JSON ci-dessous pour commencer.
2. Naviguez jusqu'à Make.com et créez un nouveau scénario...
![](https://cdn.prod.website-files.com/5bbfaf3252489b4c484ba9b9/648c5b1fbc7994f029551c78_Screen%20Shot%202023-06-16%20at%208.51.21%20AM.jpg)
3. Cliquez sur la petite boîte avec trois points, puis sur Import Blueprint...
![](https://cdn.prod.website-files.com/5bbfaf3252489b4c484ba9b9/648c5b29e80e81cad00f11c8_Screen%20Shot%202023-06-16%20at%208.51.33%20AM.jpg)
4. Téléchargez votre fichier et voilà ! Vous êtes prêt à relier vos propres comptes.
Besoin d'aide avec ce MemberScript ?
All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.
Join the 2.0 SlackHow to Stop Visitors from Scrolling when a Modal is Open
Memberscripts needed:
Tutorial:
Cloneable:
https://webflow.com/made-in-webflow/website/block-scroll-when-modal-is-open
Why/When would need to Stop Visitors from Scrolling when a Modal is Open?
- Prevent users from scrolling the background while there’s a modal open in the foreground.
- Stopping users in their tracks when you need them to acknowledge a message.
Usually if a modal’s open in the foreground, you’ll want your visitors to interact with it, whether it’s because their input’s needed to progress, or you just want them to acknowledge something before moving on.
We’re going to look at how you can quickly prevent visitors from scrolling when a modal’s open in a few easy steps.
Preventing visitors from scrolling when a modal is open in Webflow
To stop visitors from scrolling when a modal is open in Webflow, we’re going to use MemberScript #43 – Block Scrolling When Modal Is Open. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
The first thing you’ll need to do is build out the modal itself and style it however you want.
For all this to work, you’re going to need a modal that covers the entire page, because the only way it can prevent users from scrolling is if they’re hovering over it. As such, you can either just add a div block with no background or use a very limited opacity for a more pleasing aesthetic while the modal’s open.
Next up, select the div that covers the entire page and add this attribute to it:
- ms-code-block-scroll=””
Making it work
Now that you’ve got the modal and the background set up, all you need to do is add the MemberScript #41 custom code to your page, before the closing body tag.
Conclusion
That’s everything, you can now go ahead and test the modal and try scrolling while it’s open.
If you want to use our demo project to get you started, just click the image below to add it to your Webflow site.
![](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/65b3c3b87c742d5c8865177b_Screenshot%202024-01-26%20at%2015.37.20.webp)
Our demo can help you create a modal that won’t allow visitors to scroll while it’s open and they’re hovering over it.