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

本文链接：https://blog.youkuaiyun.com/zhanglong_web/article/details/82865596

本文探讨了移动端常见的弹框滚动穿透问题，分析了网上流传的三种解决方案的不足，并分享了作者通过GitHub库body-scroll-lock及better-scroll解决此问题的经验。作者提醒，避免盲目跟风复制代码，应根据实际需求寻找和实现合适的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在这里插入图片描述
  这就会导致一个移动端极其恶心的问题也就是弹框滚动穿透，接下来就聊聊这个问题。
  网上的文档大概可以分为三类：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还不能滚动，而且也是将弹框内部的滚动禁