常见场景
在许多填写表单的页面中，都会弹出一个选择器，让你在弹窗中选择项目。有时，弹窗自己容纳不下内容，须要让它不断滚动来展现，但由于事件是冒泡的，有时就会形成底部（body 的Z-index确定是在下面的 ）的内容也在滚动。这内外一块儿滚，就有点尴尬了。vue
举例，下面两张图里，都有相似的问题。那么怎么解决呢？ios
从event. target入手
一种思路就是从事件入手，若是事件对象不是弹窗的话，就让它什么都不作。git
（其实这里有个疑惑，为何不能经过阻止冒泡来阻止外层的body滚动呢？换了好几个事件类型都不行，无论是scroll仍是touchmove，很奇怪。
实践发现，touchmove事件的确不会冒泡了，但body仍然在滚动。。。那我不就不知道事件实现的机制究竟是什么了，并且用浏览器模拟的移动端，也不知道是否是模拟有误。。。
总之，event.stopPropagation() 方法在这里不是很管用。。。
）。github
好比图一中的每一栏滚动条，classname为listcol，而弹窗为.listcol，那么能够这么作：web
$('.box--listcol').on('touchmove', function(event) {
if(event.target.className.indexOf('listcol') === -1){
event.preventDefault()
}
});
// 忽略奇怪的缩进，直接从代码里粘贴出来的
仍是直接干body吧
从event入手虽好，但那样一来，每个弹窗都要单独绑一个事件，并且！！！很恶心的是，若是有个反人类的操做，好比内容明明无需滚动，却绑了事件，就仍然会在滚内容的时候带动外层滚动。。。。（此时内容是不会滚的，由于高度足够容纳了）。chrome
可能表述的不是很清晰，图二中，滚动区域的classname 为 jobscrollcontainer, 弹窗自己为box–job。浏览器
$('.box--job').on('touchmove',function(e){
if(!$(e.target).parents().filter('.jobscrollcontainer').length){
e.preventDefault()
}
})
正常操做的时候是能够的。但若是不能滚动硬滚，那就抓瞎了。markdown
因此，仍是要从根子抓起，好比，就固定body不让它滚！app
function toggleBody(isPin){
if(isPin){
document.body.style.height = '100vh'
document.body.style['overflow-y'] = 'hidden'
}
else{
document.body.style.height = 'unset'
document.body.style['overflow-y'] = 'auto'
}
}
toggleBody(1) //在跳出弹窗的时候
toggleBody(0) //弹窗消失的时候
超长的页面怎么办呢（2018-11更新）
上面直接限制body当然有效，但若是一个页面很长很长，超出了100vh，而我正好滚到中间时弹出弹窗。此时若直接限制body的overflow: hidden则会让页面一下弹到顶部，显然不是好的作法。那么，又该怎么作呢？
对移动端，能够引入touch-action，限制为none，在弹窗消失时再变回auto。但ios的safari上不支持该属性（能够去caniuse上查查，起码2018.11的时候还不支持）。若是咱们的app在ios上用的是safari内核，就起不到效果了。
这时候，就须要结合event.preventDefault属性来用了。注意在绑定addEventListener的时候，须要多传一个options，强调这个事件不是passive的，不然谷歌等新版浏览器会报错。同时最好也指定capture: true，这样能够早点禁止该事件。
报错是Unable to preventDefault inside passive event listener due to target being treated as passive.。这是由于谷歌从chrome51以后引入的新优化。事实上，谷歌建议通常状况下，将 passive 标志添加到每一个没有调用 preventDefault() 的 wheel、mousewheel、touchstart 和 touchmove 事件侦听器。可是，对于这种禁止了默认事件的eventListener，在这种状况下，反而是要强调它不是消极监听的。由于滚动都不能滚了，无所谓什么优化了。
代码以下（vue版本的）：
watch: {
show(v) {
this.toggleContainerTouchAction(v)
if (v) {
document.body.addEventListener('touchmove', this.stopTouch, { passive: false, capture: true })
} else {
document.body.removeEventListener('touchmove', this.stopTouch, { capture: true })
}
},
},
methods: {
toggleContainerTouchAction(v) {
const container = document.querySelector('.container')
if (!container) {
return
}
container.style['touch-action'] = v ? 'none' : 'auto'
},
stopTouch(e) {
e.preventDefault()
},
conclusion
直接锁定body在移动端和web都适用，但若是是从事件入手的话，就要根据须要选择究竟是用touch 仍是 mousewheel 了。
酌情使用吧，若是一个页面中有不少不一样的弹窗，那么对每个弹窗的蹦出和消失都加上toggleBody事件也是挺烦的。。。也要考虑到用什么工具作的页面，若是是框架的话，在组件里绑会相对简洁一些。。。