iPhone HTML5 App Scrolling Question

Question

I don't know if this is even possible or what to Google to find it, but like you can add:

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

And it will make it so you can't scroll side to side, only up and down. Is there a way to make it so it doesn't do that overscroll effect when you reach the end but keep scrolling and then it pops back? Like Cocoa apps ive noticed that "overscroll" sometimes they have the same background color so it doesn't look like Safari's or it just doesn't do it at all?

Answer 1

What you are calling overscroll is called bounce. Unfortunately there is not a documented way to turn off bounce in a UIWebView. You can look at UIScrollView for bounce related methods. A UIWebView owns a UIScrollView but does not expose it.

To prevent horizontal scrolling, you just have to ensure that your web page fits within the viewport. One common cause of not fitting is a 100% width item when the body margin is not zero.

You can completely prevent scrolling and bounce by adding touch event handlers to the document and calling preventDefault on the event. This will effectively disable bounce if your web page completely fits in the viewport.

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

Edit:

UIWebView is mostly private from the Objective-C side but fairly accessible from the javascript side. You can inject javascript if you do not control the content being loaded.