How to prevent body from scrolling when modal window open

Thanks @sabanna and @DFink. I added it to the customer footer code section. Will see how it looks once I publish the site. :blush:

1 Like

Hi @sabanna, I tried using the script you mentioned but it’s not working for me as I only have one button to perform the whole thing (actually, it’s a link block that opens and closes a side menu). Do you know if it’s possible to do something like on first click prevent scrolling, on second click allow scrolling?!
I tried giving the same class to .menu-button-class and .menu-class-name and nothing happens. I also tried using your script having two buttons (I already deleted the close button), with different class names and I couldn’t get this to work (which is odd because I have managed to make this work in the past with modals…)
Do you mind taking a look, please?
https://preview.webflow.com/preview/pnc-test?preview=df514a3d9bfeb25d60bfd3e01e49c264

Thanks :slight_smile:

Hi @sabanna. I used your code and replaced the .menu-button-class and .menu-class-name and when I opened the nav, scrolling was prevented. So it worked!

The problem is, after I close the navigation, I can’t scroll at all on my site. The entire page is fixed. Any ideas to make the page scrollable again?

1 Like

Works fine to me :confused: Did you manage to fix it?

Hello, @Filipa

My apology for the delay with the answer.
Could you provide the link to published site? Because I am not able to see the custom code that you are using, so it is hard to find the reason of the problem.

Regards,
Anna

Nope. I tried moving the code from the footer to the header, but that made it not work. So I moved it back to the footer. I’m still having the issue where, after I close the nav menu, the site is stalled. I am using this MagicMenu code in my custom code as well…maybe that’s having some effect?

Just to clarify, for the menu-class-name, that refers to the Nav Menu and not the Navbar or Nav Container, right? I’m using the Nav Menu class name.

HI @sabanna i might as well jump in here

Does the code basically read when .menu-button is clicked it prevents scrolling on .slide_menu ?

with my limited understanding of that is how I am reading it. But it is not working for me either.

here is my preview link https://preview.webflow.com/preview/tweetshoppeandvintagerentals?preview=f5afb0f1836410a7286f5f0d71856830 it is on the tweetshoppe main page

I do have a separate close button so maybe that will not work. But this would be a nice feature to implement because the scrolling under the menu is distracting.

thanks
Jeremy

Hi, @jbleroux

No, it works like this: When menu button (or any other object which class you will add) is clicked, js code change the CSS of the body and make it overflow: hidden >>> that makes the body unscrollable.

Then next part of the code takes click from another object (close button, menu, modal background, etc.) and change the CSS of the body again, making it overflow: auto >>> that makes the body scrolling again.

Hope it helps.
Cheers,
Anna

3 Likes

Ok that makes much more sense thank you. Is it best to place it in the custom code for the whole site? or the individual pages?

hmmm still not working maybe you could take a quick look at my read only link and see what I migth be missing

If you have the same classes for both “click events” on each page (like a menu, for example) then it makes sense to add this in site settings custom code.
If this code has to be used with a modal popup on some page, then add to page custom code.

Could you give a published site link?

1 Like

Ok, I already checked :slight_smile: Everything works

You guys probably forgot, that custom jQuery or javaScript code will work ONLY ON PUBLISHED SITE

Hey, @ckboddic

I just realize that link in your original (first) post in this topic is not your site. Could you share the read-only link and link to published site, please?

Cheers,
Anna

http://tweetshoppeandvintagerentals.webflow.io/tweet-shoppe/main

Is it working for you? I checked the published site. Maybe it’s my browser.

Checked on Chrome, Firefox and Safari. Everything works for me.

1 Like

You are a rockstar thank you Anna. You have helped me figure out a lot of stuff on here over the last 6 months.

thanks
Jeremy

1 Like

Always welcome :slight_smile: We are here for helping each other. And learning is good!

Regards,
Anna

2 Likes

Hi @sabanna,

Thanks for this script it saves me a lot of time.
However, recently, I noticed that it doesn’t work anymore (when my modal is active, the body is still scrolling. But last month this piece of code was just working right…).
May be Webflow changed his settings about this…

I’ve just added “,html” just near “body” in the code and it worked for me.
I thought it could be helpful for anyone else…

Regards,
Alain

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

Hello everyone!

I know it’s long time passed, but since many webflowers are using this workaround just wanted to share another code snippet that will work with :exclamation: Webflow navbar component. :exclamation:

This code will prevent the page from scrolling when a menu is open:

UPDATE:
There is a bug when iOS doesn’t prevent users from scrolling past the modal if there is content that exceeds the viewport height, despite adding overflow:hidden to the CSS.
iOS bug created in 2016 solved only in May 2019 but they have no idea when it will be released.
https://bugs.webkit.org/show_bug.cgi?id=153852
So I had to update the code below with the additional enhancement which detects the OS of the device and does a bit of a different approach if it is iOS.

<script>
// Detecting if it is an iOS device, true/false
  var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); 

  $(document).ready(function(){ 
    // Defining that "overlay" is the element that has a changing display value
    var overlay = document.querySelector('.w-nav-overlay');

    // Creating our mutation observer, which we attach to overlay later
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutationRecord) {

        // Checking if it's the style attribute got changed and if display value now set to 'none'?
        if( mutationRecord.attributeName === 'style' && window.getComputedStyle(overlay).getPropertyValue('display') !== 'none'){

          //Overlay's  display value is no longer 'none', now changing the "body" styles:
          if (iOS) { 
            // for iOS devices:
            var x = $(window).scrollTop().toFixed()
            

            $('body').css({'overflow': 'hidden',
                           'position': 'fixed',
                           'top' : '-' + x + 'px',
                           'width': '100vw'});
          }
          // for all other devices:
          $('body').css('overflow', 'hidden');  
        } 
         //Overlay's  display value back to 'none' , now changing the "body" styles again:
         else {
               if (iOS) {
               //  for iOS devices:
                  var t = $('body').css('top').replace('-','').replace('px','')
                  $('body').css({'overflow': 'auto',
                                 'position': '',
                                 'width': '100vw'});
                  $('body').animate({scrollTop:t}, 0);
               }
              // for all other devices:
              $('body').css('overflow', '');

        }

      });    
    });
    // Attach the mutation observer to overlay, and only when attribute values change
    observer.observe(overlay, { attributes : true, attributeFilter : ['style']});

  });

</script>

The snippet can be used regardless of the class-names you are using in your project.

Happy designing!
Anna

9 Likes