在项目里有个弹出的modal层，层级里有个滚动内容区域。发现在滚动时候焦点有可能会使底层的body滚动，去百度了一下就是移动端非常常见的透传问题。研究了一下解决方案如下
- 如果modal层可以不滚动，直接添加touchmove事件函数执行e.preventDefault可解决。【另，高版本的webkit内核可能由于passive listener忽略e.preventDefault， 绑定事件时候添加选项{passive: false}可解决】
2.modal层有滚动区域的时候，就比较复杂一些了。
1]首先，需要禁用掉body的默认滚动行为。为body添加：
body{
position: fixed; // 重要，禁用默认的滚动以及iOS的回弹效果
height: 100vh;
width: 100vw;
}
2]为body添加一个div元素替代body的功能，比如 这里使用container
.container{
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
}
3]为移动端滚动体验属性【同时也是罪魁祸首】添加类
.scroll{
-webkit-overflow-scrolling: touch;
}
4]dom结构现在是这样
<body>
<div class="container scroll">
<!-- 你的内容 -->
</div>
</body>
5]在modal层弹出的时候，把container的scroll类去掉，就没有透传问题了。
当然，正常时候要保持有这个类，不然移动端的滚动体验你知道的。
这个方案有一个问题是，body定位为fixed会影响其他有fixed定位的元素，在滚动的时候其他fixed元素会有浮动，所以自己权衡效果吧。
参考文章
深入研究-webkit-overflow-scrolling:touch及ios滚动
移动端 H5 滑动穿透 （完美解决）
网友评论