前端页面弹框遮罩禁止页面滚动的解决方法

目录

1、overflow：hidden实现方法

2、安卓机上测试overflow：hidden无效

3、position:fixed方法

4、解决 position:fixed方法的一个问题

---

实例效果：

首先咱们的需求是：锁定body，但是遮罩层的内容区域是可以滚动的，如下图所示：

1、overflow：hidden实现方法

看完需求，会心一笑，这不就是一行代码就能解决的问题么。在这里，我们第一个想到的方法就是，给body加一个overflow：hidden，只要它弹出来，咱就hidden它，缩回去，就去掉hidden。

 let $canShu = $(".product-canshu");
//点击按钮弹出遮罩层
$attributes.click(function () {
      $canShu.slideDown();
      $("body").css({
          overflow:"hidden"
      });
    $canShu.slideDown();
        return false;
    });
// 点击关闭按钮触发事件
    $('.product-fan').click(function() {
       $("body").attr('style',"");
       $canShu.slideUp();
    });

到这里已经解决三分之二的问题了，剩下的三分之一则是安卓设备那边的事情 。也就是说如果只在pc端上，我们可以用这种方式就好，因为它简单方便，但是它解决不了移动端的问题。

2、安卓机上测试overflow：hidden无效

鉴于overflow：hidden在安卓系统的手机设备上的无效，我们用另外一种方式来做，即position:fixed,

3、position:fixed方法

 let $canShu = $(".product-canshu");
//点击按钮弹出遮罩层
$attributes.click(function () {
      $canShu.slideDown();
     $("body").css({
          position:"fixed",
          width:"100%",
          zIndex:"199",
      });
    $canShu.slideDown();
        return false;
    });
// 点击关闭按钮触发事件
    $('.product-fan').click(function() {
       $("body").attr('style',"");
       $canShu.slideUp();
    });

4、解决 position:fixed方法的一个问题

这样就可以兼容安卓系统的手机设备了，但是，会发现，当页面向下滚动，只要一弹出遮罩层，页面就会返回到顶部，这样的体验并不会，那么我们不希望这样子，该怎么做呢？那就用第三种方法，监听页面的高度top，让页面定在当前位置即可。到这里已经可以解决大部分锁定body的问题，同时兼容不同操作系统的设备。

 let $canShu = $(".product-canshu");    
 function getPopup(top){
       //监听滚动高度
        top = window.pageYOffset;
        $canShu.slideDown();
      $("body").css({
          position:"fixed",
          width:"100%",
          top:-top,
          zIndex:"199",
      });
     $canShu.slideDown();
     return top;
    }
    function getPopDown(){
        $("body").attr('style',"");
        window.scrollTo(0, top);
        top = 0;
        $canShu.slideUp();
        return false;
    }
//点击打开按钮触发事件
    let top = 0;
    let $attributes = $(".product-common .details-shuxing");
    $attributes.click(function () {
        top = getPopup(top);
        return false;
    });
// 点击关闭按钮触发事件
    $('.product-fan').click(function() {
        getPopDown();
    });
    $('.product-canshu-button').click(function() {
        getPopDown();
    });

5、解决苹果手机中的scroll问题 

在苹果手机上，有时候overflow：auto出现无效的或卡顿现象，即滚动区域无法滑动，这个问题也只是存在于iphone手机上，如何解决呢？

在设置overflow：auto中加入

　-webkit-overflow-scrolling:touch;

然后再子类中设置一个最小的宽度，让iphone可以触发viewScroll；

参考文章：https://blog.csdn.net/qq_41807489/article/details/100115063

 最后对于，开始的需求，我们是不希望导航栏被挡住的。

所以我们换一种方式，不要锁定body，只需锁定滚动内容区域即可，我们可以把滚动内容的区域，放到一个div里，然后我们锁定这个div即可。

不同的需求，会有不同的做法，比如这里锁定的并不是body，而是“nav”，我们需要根据实际需求来做相应的调整。