Cannot disable scrolling in iOS when mobile menu is open

Design help General
1

Scrolling has been disabled when viewing on desktop Chrome browser when you adjust the width of the browser to smaller sizes.

But disabling scrolling didn’t work when we actually visited the site using Safari on iPhone (we have no idea if it works on an Android…)

We tried the solutions from various posts, with 2 seemingly able to get to close to what we want to achieve (see below for the 2 posts), but none of them really worked completely for us. It’s absolutely possible that we didn’t something right though.

https://discourse.webflow.com/t/how-to-prevent-body-from-scrolling-when-modal-window-open/29959/3
We implemented the code submitted by Sabanna in her response (the 3rd response top down) on Jun 16 and this works wonderful in preview. Just didn’t work on an actual iPhone/Safari. Her subsequent response (the 23rd one) on Jul 19 did not work for us, when we included it along her first response. We then tried Joseph’s codes (29th and 31st responses) dated on Sept 19, and nothing improved.

Then, we tried the code from this site:
https://webflow.com/website/brota-disable-scroll
And scrolling was still possible even though we had given attributes of scroll=‘enable’ and scroll=‘disable’ for .mobile-menu-button.close and .mobile-menu-button.open respectively.

We are feeling quite lost at this point. Would anyone be able to share a successful solution please?

Much appreciated :slight_smile:

Here’s our read-only link

2

Were you able to address this issue? We are also looking for a fix for the same issue.

Putting position:fixed on the body somewhat works, but it messes with our scroll animation.

Was wondering what you used to address your issue.

Thank you.

3

Hello!
Nope, unfortunately we have not resolve this issue :disappointed: Sorry we aren’t able to provide a solution to help!