移动端滚动透传的问题以及解决方案

在项目里有个弹出的modal层，层级里有个滚动内容区域。发现在滚动时候焦点有可能会使底层的body滚动，去百度了一下就是移动端非常常见的透传问题。研究了一下解决方案如下

1. 如果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 滑动穿透 （完美解决）