背景
产物有三宝，弹窗，浮层加指导；
设想有三宝，通明，暗影加圆角；
运营有三宝，短信，推送加红包；
程序员有一宝，这个做不了。
跟着挪动端市场的份额越大，需求就越多样化。我们本日议论的是挪动端的转动穿透题目。上面这段奚弄的话能够看出需求中弹窗浮层照样挺罕见的，那这个和转动穿透有什么联络呢？
我先诠释下什么是转动穿透：
页面滑出了一个弹窗，我们用手指触摸屏幕滑动时，会发明弹窗下面的内容照样在转动。这个征象就是
转动穿透。
接下就说下我对转动穿透题目处理计划探究的历程，愿望对人人有点启示。
需求
需求: 愿望在点击图片的时刻，从下方弹一个全屏的弹框来形貌这张图片的概况。
计划
接到这个需求以为没有难度，很快就提测了，然后就最先走走掘金。可刚看大佬们的文章看的高兴的时刻，测试就在微信我。心想来 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');
// method
modalSwitch: 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/scrollingElement
- https://uedsky.com/2016-06/mobile-modal-scroll/
前端辞书系列
《前端辞书》这个系列会延续更新，每一期我都会讲一个涌现频次较高的知识点。愿望人人在浏览的历程当中能够指正文中涌现不严谨或是毛病的处所，本人将不胜感激；若经由过程本系列而有所得，本人亦将不胜欣喜。
内容: 前端以及收集相干知识点的引见并加以现实运用作为辅佐。
目标: 这个系列的文章能够对读者起到一点协助，解开一些疑惑。
愿望列位多指导一二，不吝赐教。
下期预报
【前端辞书】继续 – JavaScript 必懂知识点
