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

Question

As the name says, I need to disable the vertical bounce on iphone in my mobile web form application. Ive tried many different things, but most of them disable my form or horizontal scroll and rebound. Any ideas?

Im using jquery.mobile btw :)

Update: I really managed to get the code from the first answer, which works somewhat:

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

The reason I couldn't get her to work in the first place was because there really was some kind of reserve on my body (stupid me). But. Since the layout is fluid and im uses jquery.mobile and has <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in the header (I think), it Does not work properly. The page will be reduced (viewing from a browser on the desktop), and scaling is disabled. Without code, the page scales perfectly right from the 50-inch TV to the smallest nokia on the planet.

Am I doing something wrong? I am starting to think that the problem is caused by the fact that the body / content somehow exceeds 100% of the viewport. I don’t know how to do it.

Answer 1

I found this answer: stack overflow

They basically detect when the user reaches the top / bottom of the page, and then intercept the scroll event using event.stopPropagation(); to prevent scrolling.

Answer 2

use this view port, specify the initial zoom level and keep the minimum and maximum zoom levels.

 <meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />