【CSS】手机浏览器页面滚动问题

问题：手机页面，我有个弹出层，层里可以滚动，但是当滚动到最上或最下后再次划屏幕时，背景会滚动，我想要当弹出层出来时只有弹出层里可以滚动，而背景页面不跟着滚动。

弹出层已经被 position:fixed，overflow:auto了，但是滑动时，弹出层有时还是会跟着动，并不是完全固定的。
图片描述

回答：

在打开弹窗的时候设置body的样式body{overflow: hidden;}，关闭的时候移除样式。记得要确保body有高喔

回答：

//阻止事件冒泡
var move = function(e) {
    e.preventDefault && e.preventDefault();
    e.returnValue = false;
    e.stopPropagation && e.stopPropagation();
    return false;
}
//wap端取消禁止滚动
function remliste(ele) {
    ele.removeEventListener('touchmove', move);
}
//wap端禁止滚动
function addliste(ele) {
    ele.addEventListener('touchmove', move);
}

回答：

现在可以了，凑合用了，我用的是artDialog，有个定们功能，还可以。

回答：

阻止一下弹层的 touchmove 事件的事件传播试试

回答：

嗯，之前也有人问过，楼上的代码再加个当有弹窗防止滚动即可。

回答：

同样遇到此类问题 楼上的回答没有解决问题

回答：

只要整个页面不可滚动， 弹层的滚动条滚动底部或顶部的时候，就不会造成页面滚动了。

加上这段css 就好了。

csshtml, boby{
    height: 100%;
    overflow: hidden;
}

以上是 【CSS】手机浏览器页面滚动问题 的全部内容， 来源链接： utcz.com/a/155234.html

回到顶部