You can also do this on the HTML+JS side, provided that the HTML document is not taller than the WebView viewport (aka window.height in JS). You do this by calling preventDefault on the 'touchmove' event at the appropriate time (namely when the element and all its parents have nothing to scroll in the direction the user began moving their finger).
I will show you actual code to do it, without using jQuery ... but you'll have to implement Q.addEventListener and Q.removeEventListener yourself (or use jQuery).
function _touchScrollingHandler(event) {
var p = event.target;
var pos;
var scrollable = null;
do {
if (!p.computedStyle) {
continue;
}
var overflow = p.computedStyle().overflow;
var hiddenHeight = p.scrollHeight - p.offsetHeight;
var s = (['hidden', 'visible'].indexOf(overflow) < 0);
if ((s || p.tagName === 'HTML') && hiddenHeight > 0) {
if ((Q.Pointer.movement.positions.length == 1)
&& (pos = Q.Pointer.movement.positions[0])) {
var sy = Q.Pointer.getY(event)
+ Q.Pointer.scrollTop();
if ((sy > pos.y && p.scrollTop == 0)
|| (sy < pos.y && p.scrollTop >= hiddenHeight)) {
continue;
}
}
scrollable = p;
break;
}
} while (p = p.parentNode);
if (!scrollable) {
Q.Pointer.preventDefault(event);
}
}
var Q = {
preventTouchScrolling: function () {
Q.addEventListener(window, 'touchmove', _touchScrollingHandler);
},
restoreTouchScrolling: function () {
Q.removeEventListener(window, 'touchmove', _touchScrollingHandler);
}
};