Disable rubber band in iOS full screen web app

Question

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.

Pathogenic

Answer 1

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.

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

});

Chicken

Is there a way to do the inverse? So allow scrolling on anything WITHOUT that class? – Agronomics

var isTouchMoveAllowed = true; if (p.classList && !p.classList.contains("touchMoveAllowed")) { isTouchMoveAllowed = true; – Cryptomeria