Block scroll while trying to scroll hovering modal BG

Design help Animations & Interactions
1

Hi everyone. I’m trying to achieve the same result as in this example: Free Cloneable: Advanced Modal Popups with Scrollbars - Webflow

The only thing that I can’t understand how to make is how to block scrolling when the mouse is outside the modal content (but on its overlay) and scroll only when it’s inside it.

I opened this example in Webflow and tried to hide/show the modal-bg element. And it looks like it blocks scroll somehow because when it’s hidden I can scroll the modal while the mouse is somewhere on the modal BG. But how that element is blocking the scroll? I already re-checked everything like 50 times and can’t figure out how it was achieved.

I can’t share a read-only file because it’s a client’s website. I can add that each modal is a child of cms library component (cards). I’m not sure if it makes any difference. I managed to make everything else from this example, like blocking page scroll when the modal is opened, but the issue is with the close-modal element (which covers the whole screen under the modal content), and regardless of whether it is fixed position or not, it keeps scrolling with the modal content.

2

This part is enabled through custom code. You can open that cloneable starter file and look in the the homepage’s settings panel: Before </body> tag

3

Thanks for the reply. I looked into it and copied it to my project. But, as far as I know, scripts don’t work inside the Designer, but the thing I’ve described does in that example.

4

Thanks for pointing this out. I’m not sure how they’ve done this to work in the designer preview. Have you tested the published version?

I’ve used this method, which has simplified code that’s tied to specific class names.

5

Thanks for your input. I tried it and it did not fix the problem for me. Anyway, I decided to rework the modals in another way and added scroll inside modal content instead of its wrapper.

6

I’m stuck on creating advanced modal popups with scrollbars in Webflow. I’ve blocked page scroll when the modal is open, but I can’t figure out how to prevent scrolling when the mouse is on the overlay. The modal keeps scrolling with its content, even when I tweak the modal-bg element. It’s part of a CMS component, which might be complicating things. Any tips?