如何深入探究滑动穿透（锁body）技术的终极奥秘？

本文共计1246个文字，预计阅读时间需要5分钟。

场景+当前页面出现浮层的时刻，滑动浮层的内容，正常情况下预期应该是浮层下方的内不滚动；但实际上并非如此。如图所示，浮层下方的内并没有滚动。解决+先去“

场景

当页面出现浮层的时候，滑动浮层的内容，正常情况下预期应该是浮层下边的内容不会滚动；然而事实并非如此。

如图所示，浮层下边的内容并没有如想象中不受影响。

解决

先去github上搜索一番，发现有解决此问题的开源包，简单粗暴直接挑选了其中star的最高的(body-scroll-lock)操作一番！
使用后发现有一些问题：

1. 安卓端全挂
2. ios端偶尔会有锁不住的情况

查源码发现该包在iOS端使用禁止touchmove的方式单独处理，但是在其他端只是给body加overflow: hidden简单处理。
于是决定写一个针对多端通用的包来处理类似的问题。

探索一：overflow: hidden

看到下边的滚动肯定立刻就想到了是整个viewport的滚动，那么如果给body设置overflow: hidden，此时body的内容就只有一屏了，肯定不会滚动了；

body { overflow: hidden; }

此方案在pc端完美解决了我们的问题，然而事情并没有那么简单；

再试试移动端：

移动端中并没有出现期待的效果。。。

既然pc端已经有了完美的方案，下边我们继续探索移动端的解决方案。