首页 文章

覆盖时防止正文滚动，默认情况下为正文'overflow: scroll'

提问于
浏览 次
0

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

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

我尝试的是在点击事件期间使用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>
jquery html css

2 回答

  • 0

    在显示叠加层时将一个类应用于正文，然后在需要时有一个meachanism来删除该类

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

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

    您可以在使用 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*/
});

    或者为您的代码段：

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

    回复于

相关问题