最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下:
方法一:弹出菜单时给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;
效果待验证。