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?

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

Solution 2

If you're using Cordova 1.7+, just open the Cordova.plist file and set the key UIWebViewBounce to NO

In Cordova 2.3+, this is now config.xml and you need to set it to false.

Solution 3

@JSW189

if you delete this line:

document.addEventListener( 'touchstart' , stopScrolling , false );

Then it should work, I guess. I got the problem that I couldn't press button's any more, i try to delete this line above and it didn't scroll any more and I could press buttons.

Solution 4

The solution for previous Cordova Versions is on following post: http://tripleshotsoftware.blogspot.ch/2012/09/stop-uiwebview-bounce-for-cordova-based.html

change the MainViewController.m (or AppDelegate.m file in older versions of Cordova/Callback/PhoneGap).

Look for webViewDidFinishLoad, and within that method add the following line:

[[theWebView.subviews objectAtIndex:0] setBounces:NO];

View more solutions

Comments

[Oscar Godson]

crap, thanks! Know of a way to do (w/o JS) to do fixed position then?

[JSW189]

@drawnonward. This worked great for me, except it disabled all my select menus. Is there any way to work around that?