移动端 H5 滑动穿透 （完美解决）

移动端H5 的滑动穿透问题 很是让人头疼  网上找了各种解决方案  都不是很完美，

于是自己 想了各种办法 终于决解了  （暂时未发现BUG）

首先滑动 穿透的分类 

一   给body加 超出隐藏

这种情况的小伙伴  简单的将 body 来个 overflow: hidden; 即可解决，

弊端：当你 往下滑动了 很多后  overflow: hidden 将会把页面 返回顶部；

二   阻止滑动事件

当弹出层出来的 时候 禁止掉 默认的滑动事件 

document.querySelector('body').addEventListener('touchmove', function (event) {
         event.preventDefault();
  });

弊端：当你弹出层 也需要滑动时  将无法滑动；

三  完美解决 方案

1，不要用系统默认的超出滑动 也就是说 你要自己写个 DIV  让其 overflow: scroll;（避免系统默认的 滑动事件）

2，整个 html 要用  position: fixed; 禁止用户用的（不禁止 会影响体验）；

3，如此设计后 你会发现 滑动穿透 已经好了  因为你根本没有用系统的 滑动，所以不会穿透，可是万恶的 IOS 来搞事情了，滑动会 没有惯性，用起来很不爽，于是在网上找到 

-webkit-overflow-scrolling : touch;

这个代码 是加惯性的 ，加上后惯性是好了，但是穿透问题又出来了，所以我们要在 弹出层出来的时候 去掉这个属性，就不会穿透 弹出层消失的 时候在增加这个属性 就可以有惯性了，至此 完美解决  

4 有任何问题 随时留言 大家共同学习