关于移动端的滚动穿透，别再跟风复制代码了

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhanglong_web/article/details/82865596

  临近国庆，包车要上个活动中心的项目，也是就个活动长列表，里面很多活动入口，每个活动都有自己的活动规则，如下图：


  这就会导致一个移动端极其恶心的问题也就是弹框滚动穿透，接下来就聊聊这个问题。
  网上的文档大概可以分为三类：1：body { overflow: hidden }； 2：body { position:：fixed； top： 0 ； left：0 }；3： 阻止事件冒泡，也就是给弹框的蒙层加addEventListener(‘touchmove’, function(e){ e.preventDefault() })； 不得不吐糟的就是大部分人都是在粘贴复制，根本没有自己实际去操作过到底这几种方法有没有实际的作用。
  先说第一种，这种方法在chrome浏览器的模拟器里是可以的，但是手机上有问题，第二种在浏览器包括安卓手机也是可以的，但是ios不行，仍旧会穿透，第三种会把弹窗自己内部的滚动也禁用，很不友好，总结下来就是这三种方法都是有点问题的，而大部分人都是在抄别人的解决方案，自己根本不去实践，不得不说这个技术氛围真的是…无语。
  我先是在GitHub上找了一个库，star还不错，说是兼容所有设备，可以再出现弹框等时候将body锁住：https://github.com/willmcpo/body-scroll-lock；
  有兴趣的可以去看下，这个我自己尝试的是会出现在弹框消失的时候偶尔导致body还不能滚动，而且也是将弹框内部的滚动禁止掉了，对于我这种弹框内部的规则还需要滚动的也不是很合适。
  而经过一天的研究之后还是选择比较原始的方式，也就是弹框出现将蒙层的滚动时间禁掉，然后内部使用better-scroll重新初始化规则框的滚动，然后在弹框消失的时候将蒙层的滚动恢复，也就是让body可以滚。代码如下：

  下面是页面dom

  到这才算是真正解决了滚动穿透，这个问题在移动端很常见，因为我们需要很多模态框来进行交互，但是总的来说，市场上也有很多忽略这个问题的存在，也就是还有很多app遗留了这个滚动穿透的问题，这显然不是很友好，虽然没有影响到实际的功能，但是体验很差，还有就是技术博客跟风太多，粘贴复制根本提高不了自己也帮不了别人。附上better-scroll的文档：https://ustbhuangyi.github.io/better-scroll/#/examples/zh