Prevent body from scrolling when mobile menu button is clicked

Hi!

I’m currently working on a portfolio page, where the body needs to be overflow: hidden; when the menu button is tapped.

So I used Finsweet to create this code:

<script>
document.addEventListener('DOMContentLoaded', () => {
 document.querySelectorAll('.mobile-menu-button').forEach(trigger => {
  trigger.addEventListener('click', function(){ 
    this.x = ((this.x || 0) + 1)%2; 
    if(this.x){ 
      document.querySelectorAll('body').forEach(target => target.classList.add('no-scroll'));
      }
      else{ 
      document.querySelectorAll('body').forEach(target => target.classList.remove('no-scroll'));
      } 
    });
 });
});
</script>

So the class being added is:

.no-scroll: {overflow: hidden !important;}

This works in the desktop browser (when I click inspect and switch to mobile view). I can see that the script has added .no-scroll to the body. But it still doesn’t work on my phone. Does anyone know why?

Any input is much appreciated! I have a iPhone 12 and use Safari, if that’s relevant.

Here’s my read-only link: Webflow - Morgenstern

Published site: https://morgensterndev.webflow.io/ (pwrd: morgenstern)

Hi MarteTeigen, can you please update your post with a published site link as well so we can try to troubleshoot your custom code? Thanks!

1 Like

Updated the post now :slight_smile: