How to prevent document scrolling but allow scrolling inside div elements on websites for iOS and Android?

Question

I created a website with jQueryMobile for iOS and Android.

I don\'t want the document itself to scroll. Instead, just an area (a

element) sh

Answer 1

Here is a solution I am using:

$scrollElement is the scroll element, $scrollMask is a div with style position: fixed; top: 0; bottom: 0;. The z-index of $scrollMask is smaller than $scrollElement.

$scrollElement.on('touchmove touchstart', function (e) {
    e.stopPropagation();
});

$scrollMask.on('touchmove', function(e) {
    e.stopPropagation();
    e.preventDefault();
});