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
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