讲解滑入(锁体)的终极探索

时间：2021-08-25 来源：互联网编辑：宝哥软件园浏览：次

事件

当页面上有浮动层时，滑动浮动层的内容。正常情况下，预计浮动层以下的内容不会滚动；然而，事实并非如此。

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

解决

先去github搜索一下，发现有一个开源包可以解决这个问题，简单粗暴的选择star最高(体-滚动-锁定)操作！使用后有一些问题：

安卓完全挂在ios上，偶尔也锁不上。查阅源代码发现，该包在iOS上是通过禁止touchmove单独处理的，但在其他端通过添加overflow: hidden到body来简单处理。所以我决定写一个多用途的包来处理类似的问题。

探索1:隐藏飞越：

当您看到下面的滚动时，您必须立即想到整个视口的滚动。如果为body设置overflow:隐藏，此时body的内容只有一屏，绝对不会滚动；

车身{ overflow:隐藏；}这个解决方案完美解决了我们在pc端的问题，但事情没那么简单；

再次尝试移动端：

预期效果没有出现在移动终端中。

既然pc有了完美的解决方案，让我们继续探索移动解决方案。

探索2:身体定位

上面认为设置overflow:为隐藏体不能解决我们移动端的问题。是不是因为身体的高度没有设置

将html和正文的高度设置为100%；为身体设置绝对定位(固定)；同时使用这两种操作似乎完美地满足了我们的需求；

但如图所示，页面每次都会被拉到顶部位置，看起来又不完美了；

因为定位是被使用的，给出一个最高值不会把我们定位在我们想要的地方(像我一样聪明)。

Tips:正文设置相对定位会拉起页面本身，底部留空

很多实验发现，这个方案在安卓上完美地达到了我们想要的效果，但在ios上并不理想；每次定位都会有闪烁的问题；好事出错，再探索ios解决方案。

探索3:禁止触摸移动

在页面上禁用touchmove是否可行？不多说就是做！当浮动层弹出时，页面元素的触摸移动被禁止

文件。addeventlistener ('touchmove '，函数(event) {event。preventdefault ()})测试发现没有达到预期的效果。我觉得这个结果是不能接受的。禁止文档的Touchmove不能禁止滚动吗？经过进一步探索，发现原因就是这个属性

传入被动addEventListener的第三个参数

最初，是浏览器的优化。Chrome passive-event-listeners passive event listeners是Chrome提出的一个新的浏览器功能：Web开发人员告诉浏览器当前页面中注册的事件监听器是否会调用preventDefault函数来阻止事件的默认行为，这样浏览器就可以根据这个信息做出更好的决策，优化页面性能。当被动属性的值为真时，这意味着侦听器不会调用preventDefault函数来防止默认的滑动行为。Chrome浏览器称这种类型的监听器为被动监听器。如果您知道问题所在，请将第三个参数传递给addEventListener

文件。addeventlistener ('touchmove '，函数(event) {event。preventdefault ()}，{passive: false})完成！突然想到，如果浮层还需要滚动，那就不是GG了！那么，有没有可能选择性地禁止滚动(禁止浮动层中的元素滚动到顶部或底部之后的滚动)？分别处理浮动层中需要滚动的元素；

目标ElEMENT。ontouchmove=function(event){ const CLIENT y=event。目标TouchS[0]。client y-初始clientY if(目标元素。滚动顶部===0 clientY 0){ return preventDefault(事件)} if(目标元素(目标元素。滚动高度-1-目标元素。滚动顶部=目标元素。client height)client y 0){ return preventDefault(事件)}事件。stopperopagation()返回true }这个方案在ios中完美实现，但是在机器人中还是有一点问题；浮层内容拉到最顶部或者最底部的时候依然会带动页面的内容有一定程度的移动。