Streaming live at 10am (PST)

Prevent body scroll when modal window is open

Hello! Love webflow, but I’m running into an issue.

Several years ago there was a thread regarding adding js to the webflow webpage to prevent the body scrolling while the modal window was active.

When I use that code, the issue is not resolved, leading me to believe that the code might be outdated. It initializes, but never reverts back. Also, I had more luck switching position:fixed than I did with overlay:hidden.

Is this script still valid or is there another way to achieve what I’m going for?

Thanks :slight_smile:

1 Like

Hey @Cameron_Wilder

Maybe you can try with the solution described here >

Piter :webflow_heart:

Hey! I’ve tried that, copying the code tag for tag and it doesn’t work.

(On a published site, not preview).

The first line of code executes, however the second does not.

Meaning, the body style changes to overflow-hidden, but does not revert back to auto.

I have zero clue why this worked, but instead of ., I used # for my CSS. Classes vs ID’s… even though I’m calling my ID’s with the classes. Interesting. HmMMmM.

Working code (for me, anyway):

Webflow.push(function() {
('.open').click(function(e) { e.preventDefault(); (‘body’).css(‘overflow’, ‘hidden’);

('#close, #modal-close-wrapper').click(function(e) { e.preventDefault(); (‘body’).css(‘overflow’, ‘auto’);

1 Like

Hey fellow Webflow community,

just got into this amazing tool and currently playing around to figure out if I’ll use it for my next project. :slight_smile:

I implemented the noscroll-solution @PiterDimitrov recommended. Works like a charm in the example, unfortunately I have the same problem as @Cameron_Wilder - reverting body ‘overflow’ : ‘auto’ back to auto, doesn’t work. And I don’t get my head around why that’s the case.

Has anybody encountered the same - maybe in a different context?

This is my preview link:

Any help is highly appreciated!