移动端H5滚动穿透解决方案

移动端页面的弹窗内容滚动会导致弹窗下层内容的滚动,这个在有些情况下是不能被接受的。google搜的方案基本上都不能完全解决问题(不知道是不是我关键字不对)

首先想到的的方案是弹窗显示的时候,给body加overflow:hidden,height:100%;,这个方案在电脑的模拟器里看是可以的,但是在IOS里打开会出问题。貌似是因为IOS对内容滚动的处理是对webview的滚动而不是一般的对内容的滚动。

然后又去找专门针对IOS的处理方案,一个方案是对弹窗加-webkit-overflow-scrolling: touch;这样的有的情况下触发了弹性效果时的确不会引起下层内容滚动,但是多试几次之后有时会不触发效果,依然导致下层内容滚动。

最后终于想到一个处理方案,就是第一种方案的升级版,需要配合JS,大致思路是弹窗显示时JS读取这时页面的scrollTop,然后将主体内容position:fixed,top设为scrollTop的负值,这样可以从根本上固定下层内容,然后隐藏弹窗时再将主体内容position:static;scrollTop设回来。完美解决问题。经测试这种方案在移动端设备都试用,包括浏览器和hybrid模式APP。

线上解决方案demo:http://m.ctrip.com/webapp/you/foods/308-schedulefood.html?poiid=[78773]