Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable scrolling in smartphone and tablet browsers?

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?

like image 409
Orb Hitter Avatar asked Apr 10 '12 23:04

Orb Hitter


People also ask

How do I disable scrolling on my website?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.

How do I disable scrolling in the background when the phone menu is open?

When the mobile menu is active (overlay) want to prevent that the body is scroll able, disable scroll for body.


1 Answers

//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;
}
like image 60
Fresheyeball Avatar answered Oct 15 '22 12:10

Fresheyeball