在 iOS 全屏 Web 应用中禁用橡皮筋

Question

我有一个在 iOS 上运行的全屏网络应用程序。当我向下滑动时，屏幕会随着橡皮筋效果（碰撞）滚动。我想锁定整个文档，但仍然允许使用 overflow-y 滚动 div：在需要的地方滚动。

我试过

document.ontouchmove = function(e){ 
    e.preventDefault(); 
}

但这会禁用任何容器中的滚动。任何想法？非常感谢。

Answer 1

在事件上调用 preventDefault 实际上是正确的，但您不想为每个组件都这样做，因为这也会阻止滚动 div（正如您提到的）和在范围输入上滑动。因此，您需要在 ontouchmove 处理程序中添加一个检查，以查看您是否正在触摸允许滚动的组件。

我有一个使用 CSS 类检测的实现。我希望允许触摸移动的组件只需分配类即可。

document.ontouchmove = function (event) {
    var isTouchMoveAllowed = false;
    var p = event.target;

    while (p != null) {
        if (p.classList && p.classList.contains("touchMoveAllowed")) {
            isTouchMoveAllowed = true;
            break;
        }
        p = p.parentNode;
    }

    if (!isTouchMoveAllowed) {
        event.preventDefault();
    }

});