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

To prevent the entire site from scrolling when creating a scrollable section within a popup in Webflow, you can apply some custom CSS and utilize interactions.

Here's a step-by-step guide on how to achieve this:

1. Start by creating your popup element on your Webflow page. You can use an interaction to show and hide the popup when necessary.

2. Inside the popup, create a container element that will hold your scrollable content. Give this container a class name (e.g., "scrollable-container").

3. Apply the following custom CSS to the container element to enable scrolling:

```css
.scrollable-container {
overflow-y: auto;
overscroll-behavior-y: contain;
}
```

This CSS sets the overflow-y property to "auto", which will enable vertical scrolling if the content exceeds the container's height. The overscroll-behavior-y property is set to "contain" to prevent the scrolling from affecting the page behind the popup.

4. Next, add a custom code block to the head of your Webflow project by going to Project Settings > Custom Code > Head Code. Paste the following CSS to disable scrolling on the body element when the popup is open:

```css

```

This custom code uses JavaScript to lock the body's scroll position, making it appear as if the site isn't scrolling when the popup is open. It also restricts scrolling within the popup container by preventing the default touchmove event.

Make sure to replace `.popup-container` in the code with the appropriate class name of your popup container element.

5. Finally, publish your site to see the changes in action. When the popup opens, the body content should be locked, and scrolling will only occur within the scrollable section of the popup.

By following these steps, you can prevent the entire site from scrolling when creating a scrollable section within a popup in Webflow.