Disable scroll on mobile devices

Question

I have a simple HTML page where when I touch a div we can't scroll. You can find this page here

If you open this page with a desktop browser, like firefox, if you hold click down on the div you can't scroll.

Now I want this behaviour on mobile, like Android. In fact on Android if you open this page you can scroll in any cases.

Sorry for the colors in my examples ;)

Answer 1

I think you are asking how to disable scroll on mobile devices:

You can add an event listener for touchstart and touchmove. Then when these events are triggered use Modernizr to detect whether the browser is a touch device. Obviously not all mobiles are touch devices and there are touch devices that have high resolution so feel free to add or to the if statement.

document.addEventListener('touchstart', this.touchstart);
document.addEventListener('touchmove', this.touchmove);

function touchstart(e) {
    e.preventDefault()
}

function touchmove(e) {
    e.preventDefault()
}

Or, just use Modernizr and then use CSS:

html.touch body {
     overflow:hidden;
}

And then add media-queries to effectively have your or statements.