How to disable vertical bounce/scroll on iPhone in a mobile web application

Posted by Kasper Skov on Stack Overflow See other posts from Stack Overflow or by Kasper Skov
Published on 2012-03-12T15:12:39Z Indexed on 2012/09/30 15:38 UTC
Read the original article Hit count: 364

Filed under:
|
|

As the title says, i need to disable vertical bounce on iphone on my mobile web form application. Ive tried alot of different things, but most of them disables my form or horizontal scroll and bounce as well. Any ideas?

Im using jquery.mobile btw :)

Update: I actually managed to get the code from the first answer working somewhat:

function stopScrolling( touchEvent ) { touchEvent.preventDefault(); }
document.addEventListener( 'touchstart' , stopScrolling , false );
document.addEventListener( 'touchmove' , stopScrolling , false );

The reason why I couldnt get it to work in the first place, was that there actually was some margin on my body (stupid me). But. As the layout is fluid and im using jquery.mobile and have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in the header (I think) it doesnt work properly. The page is zoomed out (view from like a desktop browser) and zooming is disabled. Without the code, the page scales perfectly right from an 50" tv to the smallest nokia on the planet.

Am I doing something wrong? Im starting to think the problem is caused by the body/content somehow being over 100% of the viewport. No idea how though.

© Stack Overflow or respective owner

Related posts about iphone

Related posts about jquery-mobile