JQuery弹出菜单时禁止页面（body）滚动

最近在做手机端的弹出菜单，但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去，体验非常不好，所以查了一下弹出菜单时禁止页面滚动的方法，整理如下：

方法一：弹出菜单时给body和html添加一个css样式：height:100%;overflow:hidden;弹出层消失再去掉这个类。(只给body添加样式在安卓机上无效果)

css代码：.add{height:100%;overflow:hidden;}

JQuery代码：弹出菜单时给body添加类（.add）

$('body,html').addClass('add');

菜单隐藏时给body去除add类

$('body,html').removeClass('add');

这种方法在弹出菜单时body会回到顶部，所以对这种效果不要求的话可用。

解决：弹出层出现时给body添加样式position:fixed，并算出当时页面的scrollTop滚动值，给body一个负的top值来保证body不会回到顶部，弹出层消失时恢复。

方法二：定位层之间好像是不会传递事件的，将弹窗之外的元素包在一个div里，给这个div设置定位样式，给宽高是充满屏幕的，设置overflow:auto;这样这个div和弹出层就是两个定位层，滑动弹出层时不会传递到div上的。固定div的高度是屏幕的高度，overflow:auto使滚动发生在div内部，这样弹出层的滚动就不会传递给div了,如果不给设置高度，弹出层的滚动事件仍然会传递给body，div就会随着body滚动。

这种方法在iphone手机上效果不是太好。

方法三：在需要滚动的元素上加上-webkit-overflow-scrolling : touch；

效果待验证。

 

转载于:https://www.cnblogs.com/maxiaocang/p/9954410.html