Streaming live at 10am (PST)

Prevent body scroll when modal window is open

#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 > https://webflow.com/website/Lock-Body-Scroll-Including-iOS?s=body-scroll-lock

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