Disable Site Scroll when Fullscreen Menu is Open

Simple
Disable Site Scroll when Fullscreen Menu is Open

If you're having issues with your website still scrolling when you open your navigation menu, this snippet will stop your headaches.

Go into your project settings and add this code to the </body> section of your custom code:

<script>
   // Stop body scroll when mobile menu is open
   const body = document.body;
   function letBodyScroll(bool) {
       if (bool) {
               body.style.overflow = 'hidden';
       } else {
           body.style.overflow = 'auto';
       }
   }
  const targetNode = document.querySelector('.w-nav-button');
   const config = { attributes: true, childList: false, subtree: false };
   const callback = function (mutationsList, observer) {
       for (let i = 0; i < mutationsList.length; i++) {
           if (mutationsList[i].type === 'attributes') {
               const menuIsOpen = mutationsList[i].target.classList.contains('w--open');
               letBodyScroll(menuIsOpen);
           }
       }
   };
   const observer = new MutationObserver(callback);
   observer.observe(targetNode, config);
</script>
Download Assets
See an Example Website

Other Code Snippets

Learn How to Turn More Website Traffic into Customers in Just 5 Days

Trusted by hundreds of businesses around the world.

Nice! You're in the loop. Talk soon.
Oops! Something went wrong while submitting the form.