How to disable scrolling in smartphone and tablet browsers?

Question

I use the following code to disable scrolling in desktop browsers but it doesn't work for iPhone screen resolution.

$("html").css("overflow", "hidden");

What else do I need to add?

Scythia

Answer 1

//target the entire page, and listen for touch events
$('html, body').on('touchstart touchmove', function(e){ 
     //prevent native touch activity like scrolling
     e.preventDefault(); 
});

if having the touch event blocked doesn't work for you, you can always go like this:

html, body{
     max-width:100%;
     max-height:100%;
     overflow:hidden;
}

Intertwist

Thanks, your jQuery code worked nicely for what I was trying to do. – Scythia

You have to remove the touchstart because with it you disable also the "click touch" event – Tantrum

@MarcoMantovani that was not a requirement. – Intertwist

Answer 2

I'm gonna provide an a piece that doesn't utilize jQuery so the next "Javascripter" can just copy'n'paste:

var defaultPrevent=function(e){e.preventDefault();}
document.body.parentElement.addEventListener("touchstart", defaultPrevent);
document.body.parentElement.addEventListener("touchmove" , defaultPrevent);
document.body.addEventListener("touchstart", defaultPrevent);
document.body.addEventListener("touchmove" , defaultPrevent);

Volkslied

Just tested this on Android. defaultPreventDefault() doesn't seem to exist, but preventDefault() does work. – Rigel

so much for copy pasta. It's a typo. And corrected now thanks. – Volkslied