在iOS全屏网络应用中禁用橡皮筋 [英] Disable rubber band in iOS full screen web app

问题描述

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

I have a full screen web app running on iOS. When I swipe down, the screen scrolls with the rubber band effect (bumping). I want to lock the whole document but still allow scrolling divs with overflow-y: scroll where needed.

我已尝试过

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

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

but this disables scrolling in any container. Any idea? Thank you very much.

推荐答案

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

Calling preventDefault on the event is actually correct, but you don't want to do it for every component since this will also prevent scrolling in divs (as you mention) and sliding on range inputs for instance. So you'll need to add a check in the ontouchmove handler to see if you are touching on a component that is allowed to scroll.

我有一个使用检测的实现一个CSS类。我希望允许触摸的组件只需指定类。

I have an implementation that uses detection of a CSS class. The components that I want to allow touch moves on simply have the class assigned.

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全屏网络应用中禁用橡皮筋的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！