Search code examples
jqueryiphonescrollsmartphone

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?


Solution

  • //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;
    }