Question

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

现在，我尝试在点击按钮后显示不透明度叠加，防止在叠加期间身体滚动。

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

＆＃13;

$(".click_mebutton").click(function(){
    
	     $(".overlay").show();
	       $(document.body).css('overflow','hidden');
	
       });

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

我遇到了同样的问题。发生的事情是文档的主体在没有滚动条的情况下变大。幸运的是我发现了一个修复：

您可以在使用body触发叠加层之前获取默认width var BodyWidth = $('body').width();，然后将width的{{1}}设置为相同的值触发叠加层，使其不会改变。然后，您可以在触发事件时将body和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*/
});

$(".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，则可能仍会受到影响。但是，如果叠加层覆盖了页面的其余部分，或者如果您在背景图像中使用了正文中的容器，那么它将不会引人注意。

覆盖时防止身体滚动，身体溢出：滚动＆＃39;默认情况下

2 个答案: