Menu
I have a multi-page app written with JQuery 1.4, displayed in an iOS WebView. It uses a static header and the content has 20 or so divs with embedded images and text. I am not using PhoneGap.
In the WebView and in Safari, I can scroll through the content vertically, but I don't get the same smoothness you'd get in an iOS app (i.e. the scroll continues for a bit after finger comes up = "smooth" scrolling). The scroll just stops when my finger comes off the screen.
Is there a setting or issue I don't know about when it comes to smooth scrolling of content in JQuery Mobile?
900
I think it has to do with the fact that you are no longer scrolling the <body> element, but rather a JQuery Mobile Page <div>. If you make a <div> scrollable without JQuery Mobile, you should be able to replicate this choppy experience.
What you are looking for is actually called momentum scrolling and is sometimes also referred to as inertial scrolling.
Supposedly, you should be able to add the css property -webkit-overflow-scrolling: touch; to the div you want to add momentum scrolling to and it should work, but I have not been able to get this to work on the Page <div>. I did try adding it to the body and I was able to get the right scrolling, but my fixed header started jumping around while I was scrolling.
If you don't have a fixed header, feel free to give it a shot.
body {
-webkit-overflow-scrolling: touch;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
