Is there an updated method or script that can prevent body scrolling while a modal window is active in Webflow?

Preventing body scrolling while a modal is active is essential for a seamless user experience. Here’s an updated approach in Webflow:

​

1. Use Webflow Interactions

​

• Create a modal overlay to cover the rest of your page content. This will help in naturally preventing interaction with the background.
• Use Webflow’s interactions to ensure that when you trigger the modal, the body does not scroll. 

​

2. Custom Code in Page Settings

​

• Go to your Webflow project and navigate to the Page Settings for the page where your modal exists.
• Add the following custom code in the "Before </body> tag" section:

​

<script>
  const openModal = () => {
    document.body.style.overflow = 'hidden'; // **Locks scroll**
    // Display your modal here, e.g., modal.style.display = 'block';
  };

  const closeModal = () => {
    document.body.style.overflow = 'auto'; // **Re-enables scroll**
    // Hide your modal here, e.g., modal.style.display = 'none';
  };
</script>

​

3. Triggering the Modal

​

• Create a button or link that will open the modal.
• Set the interaction to trigger the openModal function when this element is clicked.

​

4. Closing the Modal

​

• Ensure there is a way to close the modal, such as a close button within the modal.
• Set the interaction to trigger the closeModal function on clicking the close button.

​

5. Testing

​

• Test the modal on desktop and mobile to ensure the body scroll is locked when the modal is active.
• Debug any issues by checking the console for JavaScript errors and ensuring your Webflow interactions are correctly set up.

​

Summary

​

To prevent body scrolling while a modal is active in Webflow, use a combination of Webflow interactions and custom JavaScript. Set the body's overflow to 'hidden' when the modal opens and revert it back when closed. This approach ensures a smooth and user-friendly experience.