How can I prevent the home page from scrolling when a modal is open in Webflow, and ensure that the modal always opens at the top of the page?

To prevent the home page from scrolling when a modal is open in Webflow and ensure the modal opens at the top of the page, follow these steps:

​

1. Disable Scrolling on the Body

• Open Webflow Designer and navigate to the page where your modal is located.
• Select the Body element in the Navigator panel.
• Add a custom class to the Body (e.g., "no-scroll").
• Use custom CSS in the project settings or an Embed element within the page to apply the following styles to the "no-scroll" class:
• overflow: hidden; - This will prevent the page from scrolling.

​

2. Open Modal at the Top of the Page

• Ensure your modal is set to a fixed position. 
• Check the modal settings to confirm it starts in the top-left corner of the viewport using the positioning tools in Webflow.
• Use a script to scroll the page back to the top when the modal opens, if necessary.

​

3. Add Interaction to Apply and Remove the No-Scroll Class

• Create a Webflow interaction that triggers when the modal is opened.
• Add an action to the interaction to give the Body the "no-scroll" class when the modal opens.
• Create another interaction for when the modal is closed, removing the "no-scroll" class from the Body.

​

4. Ensure Reset Styles

• Ensure that when the modal is closed, any styles added specifically for preventing scrolling are removed properly to allow normal page behavior.

​

Summary

By adding a "no-scroll" class to the body and using Webflow interactions to toggle this class when a modal opens and closes, you can effectively prevent page scrolling. Setting the modal to fixed positioning and checking the viewport alignment ensures it appears at the top of the page.