Prevent body from scrolling when mobile menu button is clicked

Design help Custom code
1

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: https://preview.webflow.com/preview/morgensterndev?utm_medium=preview_link&utm_source=designer&utm_content=morgensterndev&preview=d2052c25d3086cec5c7948bb74c6227c&workflow=preview

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

2

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
3

Updated the post now :slight_smile:

4

For all the future solution-seekers. This is the most easy and only working tutorial i found:
https://www.youtube.com/watch?v=HUQECt_1fvI