先说说我自己需求: 点击顶部菜单按钮会弹出菜单选项,然后背景有一个遮罩效果,此时菜单选项出现要求禁止页面滚动,关闭才能继续滚动
解决: 因为即使加了遮罩如果页面高度大于手机高度默认还是可以滚动的,网上有很多解决方法,我也看过试过,有些还要计算已经滚动的高度,因为有个方法是禁用了会自动弹回顶部,大概网上方法有:
方法1:设置监听事件,阻止默认事件行为
bug->遮罩弹出页面自动置顶,需要计算滚动距离,烦
$("body").css({
position: "fixed",
width: "100%"
});
document.body.addEventListener("touchmove", bodyScroll, false);
function bodyScroll(event) {
event.preventDefault();
}
方法2:加这个
document.body.addEventListener("touchmove", bodyScroll, {
passive: false });
function bodyScroll(event) {
event.preventDefault();
}
passive是干吗用的呢,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。加上{
passive: false }能防止页面卡顿。
对比第一个,就不需要设置body样式了
有个问题:移除事件移除不了,没效果..
方法3.以后页面布局固定顶部尽量不用fixed,用abosulte
中间内容滚动就好,禁用html滚动,不适用我这里
最后我自个想了想,解决问题还是得看源头,就是滚动条怎么来的,默认是受哪个元素控制的,之前一直以为是body, 其实是html元素,html设置100%高就没有默认滚动条了呀
所以:这样不就行了么,亲测有效啊,而且不用计算高度那些,美滋滋,暂时没发现这样会出什么问题,所以我这样做了。
// 关闭菜单去掉禁止
$("html").css({
overflow: "auto",
height: 100%
});
// 禁止滚动
$("html").css({
overflow: "hidden",
//height: 100%
});
}