Question

有没有办法阻止在Android浏览器中滚动呈现的HTML页面？以下内容似乎对Android浏览器中的页面滚动没有任何影响：

var preventDefault = function(e) {
    e.preventDefault();
    return false;
};
document.addEventListener('touchmove',preventDefault,false);
document.body.addEventListener('touchmove',preventDefault,true);
window.addEventListener('touchmove',preventDefault,true);

（我尝试过开和关。）

在我看来，Android Webkit使“窗口”与文档的长度相同，因此在浏览器本身上进行滚动，而不是在文档正文或DOM窗口对象上进行滚动。有点奇怪的是，这正是iOS上的webkit所做的，但上面的代码仍然有用。

Answer 1

回答我自己的问题。

问题最终是您需要捕获并禁止ontouchstart以及ontouchmove document以阻止浏览器滚动。这在iOS中肯定是不同的，但它在两个平台上的工作方式仍然相同。

我最终使用的实际代码看起来像这样：

var preventDefault = function(e){
    e.preventDefault();
};
var touchstart = function(e) {
    document.addEventListener('touchstart', preventDefault,false);
    document.addEventListener('touchmove',  preventDefault,false);
    /*do other stuff*/
};
var touchend = function(e) {
    document.removeEventListener('touchstart', preventDefault,false);
    document.removeEventListener('touchmove',  preventDefault,false);
};

element.addEventListener('touchstart',  touchstart, false);
element.addEventListener('touchend',    touchend,   false);

Answer 2

虽然不适用于Android上的Chrome

但是防止窗口上的事件并停止立即传播会有所帮助！

处理程序不应被动地这样做。

可能会在capturing阶段添加事件处理程序也会有所帮助

但是下面的代码段已由我测试

window.addEventListener("touchmove", function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
}, { passive: false });

DEMO https://codepen.io/ColCh/full/qvLqoe

防止在Android浏览器中滚动

2 个答案: