租车网站模版,南京制作网页学校,wordpress描述插件,招标项目怎么查询点击上方“前端真好玩”#xff0c;喜欢他就关注他听说#xff0c;看恺哥的文章会上瘾背景产品有三宝#xff0c;弹窗#xff0c;浮层加引导#xff1b;设计有三宝#xff0c;透明#xff0c;阴影加圆角#xff1b;运营有三宝#xff0c;短信#xff0c;推送加红包喜欢他就关注他听说看恺哥的文章会上瘾背景产品有三宝弹窗浮层加引导设计有三宝透明阴影加圆角运营有三宝短信推送加红包程序员有一宝这个做不了。随着移动端市场的份额越大需求就越多样化。我们今天讨论的是移动端的滚动穿透问题。上面这段调侃的话可以看出需求中弹窗浮层还是挺常见的那这个和滚动穿透有什么联系呢我先解释下什么是滚动穿透页面滑出了一个弹窗我们用手指触摸屏幕滑动时会发现弹窗下面的内容还是在滚动。这个现象就是滚动穿透。接下就说下我对滚动穿透问题解决方案探索的过程希望对大家有点启发。需求需求: 希望在点击图片的时候从下方弹一个全屏的弹框来描述这张图片的详情。方案接到这个需求觉得没有难度很快就提测了然后就开始逛逛掘金。可刚看大佬们的文章看的开心的时候测试就在微信我。心想来 bug 了突然意识到写弹窗的时候忘记处理滚动穿透的问题了。记得第一次遇到这个问题的时候也是找了很久的资料。方案一找到的第一个方法就是当弹窗触发的时候给 overflow:scroll: 的元素加上一个 class (一般都是 body元素)。退出的时候去掉这个 class。下面为了方便会直接用 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 这个 class 会使 body 的滚动位置会丢失那么我们为什么不在滚动位置丢失之前先保存下来等到退出弹窗的前在將这个保存下来的滚动位置在设置回去。然后就朝着这个方向开始 coding 。// css 部分.modal_open { position: fixed; height: 100%;}// js 部分/** * ModalHelper helpers resolve the modal scrolling issue on mobile devices * https://github.com/twbs/bootstrap/issues/15852 */var ModalHelper (function(bodyClass) { var scrollTop; 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(){ let self this; if( self.switchFlag close ){ ModalHelper.afterOpen(); self.switchFlag open; }else{ ModalHelper.beforeClose(); self.switchFlag close; }}方案二可以达到以下效果弹窗滚动的时候下方的 body 是固定的无法滚动body 的滚动位置不会丢失body 有 scroll 事件方案二可以适应绝大多数的弹窗需求提测后测试方也没有在提其他问题这个问题算是完美的解决了。不过我在这个过程有一个疑问IOS 自有的橡皮筋效果会导致页面会出现短暂卡顿现象暂时没有找到原因请教各位。其他方案使用 preventDefault 阻止浏览器默认事件var modal document.getElementById(modalBox);modal.addEventListener(touchmove, function(e) { e.preventDefault();}, false);这个方案只适用于这个弹窗本身的高度小于屏幕的高度即不可滚动的时候。 touchmove 比 touchstart更加合适。因为 touchstart 会连点击事件都阻止。使用插件对于插件我的态度是除非是自己实现起来太复杂否则还是自己花点时间去实现。原因有二使用插件就意味着需要引入的文件至少多了一个。插件过多担心日后项目升级维护成本加大。以上。参考https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElementhttps://uedsky.com/2016-06/mobile-modal-scroll/前端词典系列《前端词典》这个系列会持续更新每一期我都会讲一个出现频率较高的知识点。希望大家在阅读的过程当中可以斧正文中出现不严谨或是错误的地方本人将不胜感激若通过本系列而有所得本人亦将不胜欣喜。内容: 前端以及网络相关知识点的介绍并加以实际应用作为辅助。目的: 这个系列的文章可以对读者起到一点帮助解开一些迷惑。希望各位多指点一二不吝赐教。如果你觉得我的文章写的还不错那就关注我呗原创写作实属不易感谢支持
