覆盖时防止正文滚动，默认情况下正文为“溢出：滚动”答案

【问题标题】：Prevent body scrolling when overlay on, with body 'overflow: scroll' by default覆盖时防止正文滚动，默认情况下正文为“溢出：滚动”
【发布时间】：2018-08-12 13:16:54
【问题描述】：

默认情况下，我必须使用body > overflow-y:scroll 设置我的页面，因为它在顶部有一个固定的标题，当从一个内容长的页面导航到内容较少的页面时，标题向右移动。所以这个黑客暂时解决了这个问题......

现在，我尝试在单击按钮后显示不透明叠加层，以防止在叠加层打开期间正文滚动。

我尝试的是在单击事件期间使用 Jquery $(document.body).css('overflow-y','hidden'); 来防止正文滚动...它有效，但正文内容向右移动（滚动消失）如何解决这个新问题？

$(".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>

【问题讨论】：

欢迎来到 StackOverflow！为了让我们更好地帮助您，您能否更新您的问题，以便在minimal, complete, and verifiable example 中显示您的相关代码。如果您可以让我们知道您有什么tried so far 来解决您的问题，这也会很有帮助。如需更多信息，请参阅有关how to ask good questions 的帮助文章，并采取tour of the site :)

标签： jquery html css

【解决方案1】：

在显示叠加层时将类应用到正文，然后在需要时具有删除该类的机制

// 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;}

【讨论】：

但它会将正文内容向右移动。我想要的是正文内容或标题仍然存在。

【解决方案2】：

我遇到了同样的问题。正在发生的事情是文档的正文变得更大而没有滚动条。幸运的是我找到了解决办法：

您可以在使用var BodyWidth = $('body').width(); 触发覆盖之前获取默认的body width，然后在触发覆盖之后将body 的width 设置为相同的值，这样它就不会改变。然后，您可以在触发事件以关闭覆盖时将overflow 和width 设置回自动。

这就是它的样子：

$('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*/
});

或者为你的代码sn-p：

$(".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>

请注意，如果您将background-image 设置为body，它可能仍会受到影响。但是，如果覆盖覆盖了页面的其余部分，或者如果您在正文中使用容器作为背景图像，那么它就不会被注意到。

【讨论】：