Body Scroll not disabling on Mobile

Design help Custom code
1

Hello,

I have used the following block of code to prevent scroll on display of modal menu:

<style>
.no-scroll {
		overflow: hidden;
}
</style>
<script>
$('.nav-bar_menu-lottie').on('click', function() {
	$('body').toggleClass('no-scroll');
});
</script>

Behavior is perfect on desktop and I’m seeing .no-scroll toggle in inspector mode on Chrome regardless of size.

However, when I view on mobile I am able to scroll the menu. Sometimes it grabs and sometimes it doesn’t but It’s not too hard to get it to scroll if I really try, especially in the navbar area.

I have tried changing ‘click’ to ‘tap’ and ‘click touchstart’ but no joy.

Is this possibly an iOS specific thing? Is there a way to debug the browser on a mobile platform? Never tried this.

https://villiers.webflow.io/

Thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/villiers?utm_medium=preview_link&utm_source=designer&utm_content=villiers&preview=52520cdde8512a0b1903b8ca1abbc7c6&workflow=preview

2

Hi @learyjk, a good tool to use for testing and inspecting a mobile site is https://browserstack.com, there you can emulate many different kinds of real devices and inspect the css etc.

You can also emulate in the chrome browser, but if you wish to see the site on different actual devices and OS, then browserstack.com is a good choice.