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

引言：

目前百度上提供的大量解决方法?三种解决方案 真的是认真的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参数，安卓端务必不要添加

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

最后

以上就是体贴寒风为你收集整理的可能完美解决移动端滚动穿透的全部内容，希望文章能够帮你解决可能完美解决移动端滚动穿透所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。