Adrian Raath

Web Strategist & Webflow Developer
Follow me on:
Twitter
YouTube
Instagram
Code Snippets
Toggle Page Scroll On/Off On Click

Toggle Page Scroll On/Off On Click

with
Jquery
in
See it in actionThe codeSetting it up
With a mobile nav open, interfaces always feel cleaner when background scrolling is disabled.

See it in action

Check out the example below. when the makeshift mobile menu is open, the user is unable to scroll through background content. Upon closing the menu, the user is able to scroll again. This code could be applied to any use case where you want to enabled and disable page scrolling using a single element as a toggle.

The code

Copy the code below to the before </body> tag of the page you need the functionality on. If you want this functionality site wide, paste this code in the before </body> tag of your custom code in site settings.

‍



<script>

$('.menu-icon').on('click', function() {
  $('body').toggleClass('body-overflow-hidden');
});

</script>

‍

Setting it up

  1. Assign a class to your Webflow menu button. In the code above we have assigned it a class of <span class="class-tile">menu-icon</span>
  2. Create the class that we will toggle with the code. All you need to do on this class is set overflow to hidden. In this case we have given the class a name of <span class="class-tile">body-overflow-hidden</span>. You can call this class whatever you like so long as it includes the styling of overflow: hidden.
  3. Make sure the class you have created above is not on the body element by default. If you created it on the body, go ahead and delete it. Webflow will remember the styling of this class.
  4. Paste the code above before the </body> of either you page settings, or if you want the functionality to reflect globally, before the</body> in your custom code site settings.
  5. Make sure that the classes you created for your menu button (step 1) and your overflow setting (step 2) reflect in your code above.
  6. Publish and if you have followed the steps correctly, page scrolling should be disabled when your mobile menu is open and enabled when it is closed.
Contact me for inquiries