Prevent body scrolling when overlay on, with body 'overflow: scroll' by default

0
votes

I had to setup my page with body > overflow-y:scroll by default because It has a fixed header at the top, and when navigating fom one page with long content to one with less content the header moves rightwards. So this hack solved this issue temporarily...

Now, I'm trying to show an opacity overlay after clicking on a button, preventing the body from scrolling during the overlay is on.

What I tried was to use Jquery $(document.body).css('overflow-y','hidden'); during the click event to preventing the body from scrolling...It works, but the body content moves rightwards (scroll disappears) How to solve this new problem?

$(".click_mebutton").click(function(){
    
	     $(".overlay").show();
	       $(document.body).css('overflow','hidden');
	
       });	
body {
        height: 100%; overflow: scroll; /*overflow:hidden after jquery() execution*/
         }
.body_container{
height: 100%;   
         }
         
         .content{height:1000px;background:green}
    .overlay{
		display:none;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);
		z-index:9999;
            }
            

           .top_fixed_header{
    position: fixed
    top: 0;
    left: 0;
    height: 40px;
    background:red;
    width: 100%;
    min-width: 100px;
    z-index: 999;
    padding-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
        <body>
           <div class=body_container>
                          <div class=top_fixed_header>header</div>
                          
                          <div class=content>
               <div class=click_mebutton>[click me button]</div>  

                           </div>
                          
          </diV>
                          
                        
           </diV>
           
         </body>
 </html>
 
 <div class="overlay">Overlay</div>
2
jqueryhtmlcss
Welcome to StackOverflow! In order for us to help you better, can you please update your question so that it shows your relevant code in a minimal, complete, and verifiable example. It would also be helpful if you could let us know what you have tried so far to solve your problem. For further information, please refer to the help article regarding how to ask good questions, and take the tour of the site :) – Obsidian Age

2 Answers

0
votes

Apply a class to the body when the overlay is shown and then have a meachanism to remove the class when required

// js
  $(".add-overlay-button").click(function(){
     $(".overlay").show();
     $(document.body).addClass('has-overlay')
   });

  $(".remove-overlay-button").click(function(){
     $(".overlay").hide();
     $(document.body).removeClass('has-overlay')
   });

//CSS
  body {overflow: scroll;} 
  body.has-overlay {overflow: hidden;}
0
votes

I had the same exact problem. What is happening is that the body of the document gets larger without the scrollbar there. Luckily I found a fix:

You can can get the default body width before the overlay is triggered with var BodyWidth = $('body').width(); then set the width of the body to that same value after triggering the overlay so it doesn't change. You can then set both the overflow and width back to auto when triggering the event to close the overlay.

So this is what it would look like:

$('div.pop-up-button').click(function(){
  var BodyWidth = $('body').width();
  $('body').css({'overflow':'hidden','width':BodyWidth});
  /*code to show pop-up */
});

$('div.close-pop-up').click(function(){
  $('body').css({'overflow':'auto','width':auto});
  /*code to close pop-up*/
});

Or for your code snippet:

$(".click_mebutton").click(function(){
       var BodyWidth = $('body').width();
	   $(".overlay").show();
	   $(document.body).css({'overflow':'hidden', 'width':BodyWidth});
	
       });	
body {
        height: 100%; overflow: scroll; /*overflow:hidden after jquery() execution*/
         }
.body_container{
height: 100%;   
         }
         
         .content{height:1000px;background:green}
    .overlay{
		display:none;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);
		z-index:9999;
            }
            

           .top_fixed_header{
    position: fixed
    top: 0;
    left: 0;
    height: 40px;
    background:red;
    width: 100%;
    min-width: 100px;
    z-index: 999;
    padding-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
        <body>
           <div class=body_container>
                          <div class=top_fixed_header>header</div>
                          
                          <div class=content>
               <div class=click_mebutton>[click me button]</div>  

                           </div>
                          
          </diV>
                          
                        
           </diV>
           
         </body>
 </html>
 
 <div class="overlay">Overlay</div>

Note that if you have a background-image set to the body it may still be affected. But if the overlay covers the rest of the page, or if you use a container within the body for your background image, then it won't be noticeable.