移动端禁止遮罩层以下屏幕滑动


当点击按钮之后,滑动弹窗,遮罩层以下的页面也会移动,这让体验很不好。请问各位有什么比较好的方法?

移动端web 前端 JavaScript

Seigaku 8 years, 9 months ago

点击事件里加上$("body,html").css({"overflow":"hidden"});
关闭时恢复

超级无敌奖门人 answered 8 years, 8 months ago

题主作答:
见到这个问题的时候,我想的是既然要禁止页面滚动,那就禁止touchmove的默认行为,所以想到的都是preventDefault(),然后阻止冒泡。但是这方法绑定与解绑都比较麻烦,而且后来弹窗里面又出现了滚动条,前面禁止touchweb的默认行为之后,弹窗里的滚动条就不能滚了。这就over。。。
后来我想,既然页面不能滚动,就让页面fixed住,然后在点击事件触发的时候获取window的offsetTop,然后设置成负值赋给页面元素(反正我觉得复制给body也可以。。。)。弹窗消失的时候再恢复就行了。
其实很多时候都要思路广阔一点,一直在想怎么使用preventDefault来做,就一直失败。。希望能帮到大家。

傲娇女仆酱 answered 8 years, 8 months ago

Your Answer