可能完美解决移动端滚动穿透

引言：

目前百度上提供的大量解决方法?三种解决方案 真的是认真的CV大法吗，不管在哪个平台找到的解决方案都是这几个?百度第一页相同的答案占用了百分之六七十，可怕的占有率，大致梳理下以下三种解决方案：

1.overflow:hidden

      但是存在的缺陷是你的网页会回滚到顶部

2:js阻止滚动事件

       但是弹窗内的元素会无法滚动

3:fixed 加上js记录滚动的位置

        这个方案应该是所有文章提到的最优方案，但是其实吧我并不喜欢这种方案，改变body或者其他父级元素的position可能会影响到子集元素的flex等布局，而且一旦单页面的布局变得复杂，如果出现布局问题修改起来相当繁琐

解决方案：

        我的解决方案也许算不上是最优的解决方案，但是对我而言已经是表现出了极大的可行性

        布局的角度分析问题

        方案主要是在上面的方案一的基础上解决问题overflow：hidden，之前提到过这个方案存在一个缺点，那就是当页面产生滚动的是时候，此时出现弹窗页面会回滚到最顶部，那么，现在的我们只要解决回滚的问题就可以满足我们的需求，我的原则就是这样的需求能不用js就不用js?

|-body(高度100%)

     |-div#app（高度100%，只有屏幕可视部分的高度，且不会被子元素撑大）

            |-div（任意高度随意，自动撑大，即不设置css也可以）

此布局下问题就已经得到解决，当弹窗出现的时候设置body为overflow：hidden，此时遮罩层底部的页面已经无法滚动，并且不会回到顶部

但是问题依然存在一个bug 那就是在-webkit-overflow-scrolling：touch下ios端会有很高的几率出发页面的毫秒级的闪烁，可能是因为此时触发了ios的页面的重新计算滚动高度原因，解决这个问题的方案就是在body下面添加perspective:1,使用css3这个特性的原因是打开GPU加速，可能会使得渲染结果得到缓存吧，美中不足，这里需要用到js 因为只有ios端需要这个perspective这样的css3参数，安卓端务必不要添加

上面的布局样式只是提供一个思路，自己视项目的布局重新定义