后台产品有三宝、弹窗、浮层加引导；设计有三宝，透明度、阴影和圆角；操作有三宝，短信，推送加红包；程序员有宝，这个做不到。随着移动终端市场份额的增加，需求变得更加多样化。我们今天要讨论的是移动端的滚动渗透问题。从上面的笑话可以看出，弹出浮层在需求中是相当常见的，那么这和滚动穿透有什么关系呢？先解释一下什么是滚动穿透：页面滑出一个弹窗，当我们用手指触摸屏幕滑动时，会发现弹窗下面的内容还在滚动。这种现象就是滚动渗透。接下来说说我探索解决滚动穿透问题的过程，希望对大家有所启发。需求：希望在点击图片的时候，从底部弹出一个全屏的弹框，描述图片的细节。plan觉得接到这个需求不难，所以很快就放上测试，然后就开始淘掘金了。但是当我高兴的看大佬们的文章的时候，考的是微信。想到一个错误？突然发现自己写弹窗的时候忘记处理滚动穿透的问题了。记得第一次遇到这个问题，找了半天资料。解决方案一：我找到的第一个方法是在触发弹窗时，在overflow:scroll:元素（一般是body元素）中添加一个类。退出时删除此类。为方便起见，将直接使用body元素来引用弹出窗口下方的元素。//css部分modal_open{position:fixed;height:100%;}//js部分document.body.classList.add('modal_open');document.body.classList.remove('modal_open');上面的方法可以解决滚动穿透的问题，但是也会带来新的问题。即：body的滚动位置会丢失，即body的scrollTop属性的值会变成0。这个新问题比滚动穿透本身更麻烦，所以这个方案需要优化。解决方案二：既然添加modal_open类会导致body的滚动位置丢失，那为什么我们不在丢失之前保存滚动位置，在退出弹窗前把保存的滚动位置设置回来。然后开始往这个方向编码。//css部分.modal_open{position:fixed;height:100%;}//js部分/***ModalHelper助手解决移动设备上的模式滚动问题*https://github.com/twbs/bootstrap/issues/15852*/varModalHelper=(function(bodyClass){varscrollTop;return{afterOpen:function(){scrollTop=document.scrollingElement.scrollTop||document.documentElement.scrollTop||document.body.scrollTop;document.body.classList.add(bodyClass);document.body.style.top=-scrollTop+'px';},beforeClose:function(){document.body.classList.remove(bodyClass);document.scrollingElement.scrollTop=document.documentElement.scrollTop=document.body.scrollTop=scrollTop;}};})('modal_open');//methodmodalSwitch:function(){letself=this;if(self.switchFlag==='close'){ModalHelper.afterOpen();选择f.switchFlag='打开';}else{ModalHelper.beforeClose();self.switchFlag='关闭';}}方案二可以实现如下效果：弹窗滚动时，下面的body是固定的，不能滚动；body滚动位置不会丢失；正文有一个滚动事件；第二种方案可以满足大部分弹窗的需求，测试人员测试后没有再问其他问题。这个问题就完美解决了。问题：IOS自带的橡皮筋效果会导致页面短时间卡顿。我还没有找到原因。请告诉我。其他解决方案：使用preventDefault来阻止浏览器默认事件：varmodal=document.getElementById('modalBox');modal.addEventListener('touchmove',function(e){e.preventDefault();},false);该方案仅适用于弹窗自身高度小于屏幕高度，即无法滚动的情况。touchmove比touchstart更合适。因为touchstart甚至会屏蔽click事件。使用插件：我对插件的态度是，除非自己实现起来太复杂，否则不如花点时间自己实现。有两个原因：使用插件意味着至少需要导入一个文件。插件太多，担心以后项目升级维护成本增加。多于。参考https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElementhttps://uedsky.com/2016-06/mobile-modal-scroll/前端词典系列《前端词典》本系列会持续更新，每一期都会讲一个经常出现的知识点。希望大家在阅读过程中指正文中的不严谨或错误，将不胜感激；如果你能从这个系列中有所收获，我也会很高兴。内容：以实际应用为辅助的前端和网络相关知识点介绍。目的：本系列文章可以给读者一点帮助，解决一些困惑。希望大家多多指点，不吝赐教。下一篇预览【前端词典】继承-JavaScript必知知识点传送门【前端词典】代理的概念与应用【前端词典】滚动穿透问题的解决方法
