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

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

});