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 homepage from scrolling when a modal is open and ensure the modal opens at the top of the viewport, you'll need to set up interactions and use overflow properties carefully.

1. Disable Page Scrolling When Modal Opens

• Select the Body tag (click on the Body in the Navigator).
• Create a combo class (e.g., body no-scroll) and set it to Overflow: Hidden.
• In your modal open interaction, add a step to Add Class: no-scroll to the Body element.

2. Re-enable Page Scrolling When Modal Closes

• In your modal close interaction, add a step to Remove Class: no-scroll from the Body element.
• This restores normal scrolling once the modal is dismissed.

3. Ensure Modal Opens at Top of the Viewport

• Set the modal wrapper (overlay) element to:
• Position: Fixed
• Top: 0, Left: 0
• Width: 100%, Height: 100%
• This ensures it's pinned to the top of the screen regardless of scroll position.
• Optional: If your modal content has its own scroll, set the inner modal div to Overflow: Auto with a fixed height (e.g., max-height: 90vh).

4. On Modal Open, Scroll to Top of Modal

• In the same modal open interaction, optionally add a Scroll to Element action if needed.
• Target the modal content wrapper and scroll it to the top using Scroll animation → Scroll to → Element with Instant ease.

Summary

To lock scrolling when a modal is open in Webflow, apply an overflow: hidden class to the Body via an interaction. Ensure your modal wrapper is position: fixed at the top of the screen to make it always open at the top of the viewport. Restore scrolling by removing the class when the modal is closed.