Prevent Body Scroll on Click

A technique to stop by scrolling on click in Webflow via a small Javascript snippet. This is perfect for modal popups, navigation dropdowns and other overlays that should prevent the body from scrolling on opening.

How to add it

1. Add Javascript code snippet to the closing body tag section of your Webflow site.
2. Update the classes .nav-button and .nav-overlay to the classes you are using
3. Note: If required for mobile you could use .w-nav-overlay if you haven't set other custom class names

The code

                      <script>
//Lock body scroll when nav is open
          window.addEventListener('DOMContentLoaded', (event) => {
            $('.nav-button, .nav-overlay').click(function() {
              if ($('body').css('overflow') !== 'hidden') {
                $('body').css('overflow', 'hidden');
              } else {
                $('body').css('overflow', 'auto');
              }
            });
          });
</script>