Prevent body scroll when modal window is open

Design help Animations & Interactions
1

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
2

Hey @Cameron_Wilder

Maybe you can try with the solution described here > Lock Body Scroll (iOS Included) - Webflow

Piter :webflow_heart:

3

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.

4

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
5

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 @PeterDimitrov 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: https://preview.webflow.com/preview/orlando-management?utm_medium=preview_link&utm_source=designer&utm_content=orlando-management&preview=7757f4d892631e9cde104acb1da0df9e&pageId=5e7a2e1de0689d8e49e8d568&mode=preview

Any help is highly appreciated!

Best,
Molt