滚动渗透：页面出现弹窗，当我们用手指触摸屏幕滑动时，会发现弹窗下的内容还在滚动。解决方案一：我找到的第一个方法是在触发弹窗时，在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滚动位置不会丢失；正文有一个滚动事件；方案二可以满足绝大部分弹窗的需求，而且测试人员测试后也没有再问其他问题，是一个完美的方案
