How can I prevent the whole site from scrolling when creating a scrollable section within a pop up in Webflow?

When creating a scrollable section within a popup in Webflow, it's important to prevent the whole site from scrolling. Here's how you can achieve that:

​

1. Create the Popup

​

• Design the popup: Use a div block to create your popup and style it according to your needs.
• Add content: Place any content inside this div that you wish to display in the popup.

​

2. Make the Section Scrollable

​

• Set height limits: Make sure the section inside the popup has a defined height.
• Overflow setting: Set the section’s overflow to scroll (or auto), enabling only the content within the section to scroll.

​

3. Prevent Body Scrolling

​

• Custom Code Solution: 
  • Use an inline script in the Page Settings under the Custom Code section.
  • Add <style>body.no-scroll {-webkit-overflow-scrolling: none; overflow: hidden; }</style> in the Head Code section.
  • Then add the following script before closing the </body> tag:

      ```javascript

      <script>

      const openPopup = () => {

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

      };

​

      const closePopup = () => {

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

      };

      </script>

      ```

• Link Functions to Popup:
  • Open Popup Button: Set the button or element that opens the popup to execute openPopup().
  • Close Popup Button: Set the button or element that closes the popup to execute closePopup().

​

4. Trigger Script via Interactions

​

• Set up Webflow Interactions: Use interactions to call openPopup when the popup is triggered and closePopup when it is dismissed or closed.

​

Summary

​

To ensure only the section within a popup is scrollable, set the section to have limited height and overflow: scroll. Apply a no-scroll class to the body to prevent the entire site from scrolling. Use simple scripts linked with interactions to toggle this effect effectively.