遮罩层弹出后，禁止被遮罩部分滚动

• 需求：在弹出蒙层之后，底部页面不会滚动，关闭蒙层恢复滚动时，还在原先的位置

• 网上查找的方法：

  • 方案：在禁止时，document不滚动，body固定定位+宽度100%，恢复时，document滚动，body静态定位
  • 缺点：允许滚动时，页面会自动回到顶部

• 解决方案： 在禁止滚动时，记录当前位置，固定定位时也定在当前位置，恢复时，定在当前位置

• jQuery写法：

var topPos; //记录弹出蒙层前，页面的位置
//禁止滚动条滚动
function stopScroll() {
    topPos = $(document).scrollTop(); //记录页面的位置
    console.log(topPos);
    $('document').css('overflow','hidden'); //隐藏滚动条
    $('body').css({
          'position': 'fixed', //固定定位
          'top': -topPos + 'px', //让底层页面定位固定在蒙层弹出之前的位置
          'width': '100%' 
    });
}
//允许滚动条滚动
function openScroll() {
    $('document').css('overflow','scroll'); //显示滚动条
    $('body').css('position', 'static'); //静态定位
    $('html,body').scrollTop(topPos); //关闭蒙层，让页面蒙层弹出之前的位置
    console.log($('html,body').scrollTop());
}

• demo

    
    
    
    
    



    

        
底部页面
        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
        
11
        
12
        
13
        
14
        
15
        
16
        
17
        
18
        
19
        
20
        
21
        
底部
        
显示蒙层
    
    

        
蒙层
        
关闭蒙层
    

• 参考文章
  js弹出遮罩层，禁止滚动条滚动，隐藏遮罩层，允许滚动条滚动