原创不易，如需转载请【联系作者】或【署名作者并注明文章出处】什么是它？先解释一下什么是滚动穿透：页面滑出一个弹窗，当我们用手指触摸屏幕滑动时，会发现弹窗下面的内容还在滚动。这种现象就是滚动渗透。为什么会这样？原因：使用系统滚动，html和body的高度超过窗口高度，自动使用系统滚动，这种滚动会造成滚动穿透。如下图，上面是窗口的高度，下面是body的高度。MDN在康康文档中解释了这个问题。1.身高100%+区域滚动。100%；溢出：自动/滚动；（如果在IOS上不流畅，需要添加：-webkit-overflow-scrolling:touch;）。在html和body中添加{position:fixed;with100%;height:100%;}使html，body不再使用系统滚动；发现在安卓手机上完美实现，但是IOS的滚动机制让人头大，还是能穿透。这时候我们需要在弹窗后的滚动div中添加overflow:hidden;去掉-webkit-overflow-scrolling:touch;弹窗关闭时属性会恢复为overflow:auto；添加-webkit-overflow-scrolling:touch;实现IOS兼容；至此滚动穿透就解决了。2、touchmove+preventDefaulttouchmove+preventDefault打开模态框时，防止touchmove缺陷：模态框中滚动的内容失去滚动效果。3.标记位置，弹性容器1.记录模态框打开前背景的移动位置，关闭后弹回2.为模态框动态绑定区域内的滚动样式缺点：无法处理场景时模态框透明4、锁定容器，内容偏移模态框打开后，监听背景层容器的滚动事件，随时触发回弹。demo发现回弹会触发闪屏。考虑定位优化splashscreen，分析每次滚动间隔是否大于一帧时长结合帧刷新策略的结果如图。判断触发滚动事件时，触发帧刷新的反向反弹。考虑对每一帧进行回弹定位校准。考虑使用requestAnimationFrame【作者：360手机助手团队-XTeam】原创不易，如需转载请【联系作者】或【署名作者并注明文章出处】
