在做 h5 移动端页面时,在一个可滚动的列表页面中打开弹窗,底部的页面理论上是不可滚动的,但是当滑动弹窗时,底部页面会跟随滚动,这就是所谓的页面滚动穿透问题
或者说,在移动端页面,写了一个弹框,当弹框内容比较长,弹框内有滑动效果,在滑动的时候,当你想滑动的是弹框内的窗体内容,但是偶尔外层窗体也会跟着滑动,两个窗体之间会相互影响
这样用户体验非常不好
产生的原因
弹框的窗体内滑动与外层父级窗体的滑动会有一个先后顺序,一般是弹框窗体滑动,滑动完之后,在滑动页面的时候,就会变成了父窗体滑动(这是浏览器的默认行为),但是这个时候,我不想父窗体滑动,希望用户操作的滑动跟父窗体没有关系,永远停留在自己写的弹框滑动操作中
具体解决
阻止浏览器的默认行为,当然网上也介绍了很多种解决办法,并非千篇一律
具体步骤
方式1-控制浏览器body的overflow
// 一行代码是
$('body')[0].style.overflow = 'hidden'
// 另一行代码是
$('body')[0].style.overflow = 'auto'© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
