How to stop entire web app from scrolling in iOS when users attempts to scroll in non scrollable part?

Question

I created a web app for IOS and when users add it to their home screen via Safari, if they attempt to user their finger to scroll up or down in a part of the app which you cannot scroll in, it scrolls the entire application up or down and then snaps back into place (as if you scrolled to the bottom of a web page and then continued to try to keep on scrolling).

Is there a way to prevent scrolling up or down like that? Setting the overflow-y attribute to body, document and window to hidden doesn't fix it.

Answer 1

Use JavaScript to listen for touchmove events and use preventDefault() to cancel the default behavior. That will make it so you can't "rubber band" the page from those elements. Try something like this for the elements you don't want the user to be able to drag:

noScroll = document.getElementById("cant-touch-this");
noScroll.addEventListener("touchmove", function(e) {
    e.preventDefault();
});