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 appears at the top of the viewport, you need to use a combination of interactions and custom settings in Webflow.

1. Prevent Background Scrolling

• Webflow doesn't natively support disabling scroll, so use a custom interaction to restrict scroll by targeting the body element.

• Create a custom code embed with this CSS and add it to the Page Settings > Inside Page Head:

  ```css

  ```

• Then, in your modal open interaction:

• Add a Custom Code embed action.

• Use: document.body.classList.add('no-scroll');

• In your modal close interaction:

• Add another Custom Code embed action.

• Use: document.body.classList.remove('no-scroll');

  These actions will toggle the scrolling ability when the modal opens or closes.

2. Ensure Modal Opens at Top of Page

• Set the modal container’s position to Fixed with top set to 0px.

• Style settings:

• Position: Fixed

• Top: 0

• Left: 0

• Width: 100%

• Height: 100vh

• Overflow: Auto (if the modal content is scrollable)

• Z-index: High enough to overlay all content (e.g., 9999)

• This ensures that the modal fills the viewport and appears at the top, regardless of the page's current scroll position.

3. Optional: Reset Scroll Position of Modal

• If your modal content is scrollable and you want it to always start from the top when opened:
• Use a custom code embed in the modal open interaction:
  • document.querySelector('.your-modal-class').scrollTop = 0;
• Replace .your-modal-class with your modal’s selector.

Summary

To prevent scrolling when a modal is open, add a no-scroll class to the body using custom code in interactions. To ensure the modal opens at the top, make the modal container Fixed with top: 0. Optionally, reset the modal scroll on open using a scrollTop command.