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();
    }

});

在iOS全屏网络应用中禁用橡皮筋

1 个答案: