JQuery Mobile Scrolling not smooth on iOS

jquery ios smooth-scrolling
dixkin picture dixkin · Jan 18, 2014 · Viewed 19.6k times · Source

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?

Answer

Scott David Murphy picture Scott David Murphy · Mar 14, 2014

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

Related questions

Can you autoplay HTML5 videos on the iPad?

The <video> tags autoplay="autoplay" attribute works fine in Safari. When testing on an iPad, the video must be activated manually. I thought it was a loading issue, so I ran a loop checking for the status of …

Read More
Remove attribute "checked" of checkbox

I need remove the attribute "checked" of one checkbox when errors occur. The .removeAttr function not work. Any idea? :/ HTML <div data-role="controlgroup" data-type="horizontal" data-mini="true" style="margin-left: auto; margin-right: auto; width: 100%; text-align: center;"> <input type="…

Read More
iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?

I'm working on an iPad-based web app, and need to prevent overscrolling so that it seems less like a web page. I'm currently using this to freeze the viewport and disable overscroll: document.body.addEventListener('touchmove',function(e){ e.preventDefault(); }); …

Read More