Streaming live at 10am (PST)

How to prevent body from scrolling when modal window open

I’ve tried all the snippets of this tread and its not working.
Was there any change on this behavior @sabanna ?


1 Like

Hi thank you for the contribution.
Your code works for me, only thing is that the ‘position’ and ‘top’ properties cause a page jump as its children can’t rely on its width still being 100% of the screen.
So I added body {width:100%} as custom code (the designer doesn’t let you do it) and the jump is no more.

Awesome. This code still works. People need to remember that on the 3rd line of this script, “menu-button-class” is just a PLACE HOLDER. Meaning you’re supposed to change this name to match your class name. My “Menu Button” in webflow (the one with the finger pointing icon) was named “menu button” so in the script above I named it ‘.menu-button’ and not ‘.menu-button-class’ as originally written in the script.

Hope this helps any stragglers as this seems to have been an issue for 4+ years.

Hello @Mauricio and then where you put the element you want to tap to back to scroll?
Should it be on ‘body’?

I tried this code and the first interaction worked fine (prevent scroll), but the second one (back to normal scroll) is not working.

It doesn’t work both on desktop Safari and Google. Wasted 30 min.

Does not work with Chrome either.