Prevent Body Scrolling on Mobile Navigation Open

Hey, @dankanvis!

.open-button-class-nameand .close-button-class-name or .open-close-button-class should be classnames of your buttons

Got it. It worked. Thank you so much for the quick reply!

1 Like

Hi, sabanna!

I have tried your advice in order to fix my problem with scrolling body on Mobile version when block with course info is open. But it didnā€™t work. Maybe I done smth wrong. Can you look at this please?
My published site - https://bluria-5d03f02f3df10a749e-2930ecbd5bffd.webflow.io/
Preview link Webflow - Most updated version

I use ā€œopen-button-class-nameā€ class for scroll block (it open info about course) and ā€œclose-button-class-nameā€ for Close block (this is a cross that closes the course info)

Also it works wrong in Safari.

This code worked almost perfectly here. The only thing weird is that for some reason, itā€™s not considering my scroll position, so the overlay is shown on a random area of the page.

Read-Only link: Webflow - MouseHover Tests

Does anyone have any idea about what is happening here?

2 Likes

Wonderful solution.
it works for me correctly.

Hi @Siton_Systems ! This solution worked perfectly for meā€¦ except for one thing. The scroll behavior on iOS is affected a little bit. The up and down status/action bars in safari donā€™t go away/minimize like they should and I canā€™t tap on the adress bar to go back to the top of the page.

Any idea why that is?

Super thanks!

Best regards,
Bjƶrn

Hey @sabanna! Thank you for all of youā€™re amazing tips/tricks. Any idea why the scroll position resets to the top of the page? Iā€™m using your code for my tablet/mobile navigation.

Hereā€™s the read-only link:

https://preview.webflow.com/preview/cgf-website?utm_medium=preview_link&utm_source=designer&utm_content=cgf-website&preview=3e0723551fca545fd44bae44ca468e4b&workflow=preview

Thanks again!

Hi @dylanclarey ! Did you figure this out? Iā€™m having the same issue. @sabanna any help would be much appreciated!

No, I never figured it out! :confused: