javascript - Disable rubber band in iOS full screen web app - Stack Overflow

admin管理员组

文章数量:1303451

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.

I have experimented with

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

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

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.

I have experimented with

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

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

• javascript
• web-applications
• scroll
• iphone-standalone-web-app
• rubber-band

Share Improve this question Follow asked Nov 11, 2013 at 15:08 ThomasThomas 22555 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Calling preventDefault on the event is actually correct, but you don't want to do it for every ponent 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 ponent that is allowed to scroll.

I have an implementation that uses detection of a CSS class. The ponents 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();
    }

});

本文标签： javascriptDisable rubber band in iOS full screen web appStack Overflow