12

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?

Kara
  • 6,115
  • 16
  • 50
  • 57
dixkin
  • 811
  • 2
  • 11
  • 20

5 Answers5

21

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;    
}
Scott David Murphy
  • 421
  • 4
  • 8
  • So in my case, I had someone else working on the app and they put in a bad CSS rule which caused this bad experience. I discovered this by stripping out all the CSS except the JQuery Mobile CSS. Then I slowly added the rest of the custom CSS until I located the bad rule. It was pretty frustrating, but was a consequence of multiple people working on the same project. The reason why I thought it was JQuery Mobile at first was because I had also tried removing JQuery Mobile and the app worked fine without it. So I guess the 2 rules were competing. – Scott David Murphy Mar 15 '14 at 05:48
  • Champion! This helped alot. – Ryan Coolwebs Jun 05 '14 at 00:04
  • For me it helped too. Thank-you Scott! Can you tell us additionally, what you identified as "bad rules" in your project? – marcel Mar 24 '15 at 10:11
  • yeah, he added this to the css which served no purpose: `html { overflow-y: scroll; }` After I deleted it, problem solved. – Scott David Murphy Jul 21 '15 at 07:05
  • this is what worked for me. `.wrapper { -webkit-overflow-scrolling: touch; overflow-y: scroll; }` – Mr. Crowley Sep 01 '15 at 13:40
  • @ScottDavidMurphy Have you fixed the issue WITH a fixed header? – ModusPwnens Oct 25 '17 at 12:40
4

For us, the problem was in the CSS of jQuery Mobile, and we fixed it like this:

.ui-mobile .ui-page-active{display:block;overflow:visible;/*overflow-x:hidden*/}

Fixed the scrolling error for us.

overflow-x: hidden messed things up.

EpicPandaForce
  • 79,669
  • 27
  • 256
  • 428
  • 1
    Everybody having that problem, try this one first! – leymannx Jun 24 '15 at 13:44
  • Have the same problem but the provided solution does not work. As soon as I have to set a height to the scrollable DIV the scrolling doesn't work anymore (jitters). – Jonny Sep 16 '18 at 11:08
  • 1
    Thanks for this in 2020! It fixed my vertical scrolling problem, although I had to add overflow-x:unset; – Benny G Jan 04 '20 at 12:06
0

Perhaps the issue is that it is taking lots of processing power to paint those images/divs. Did you compress your files?

You can read here for more:

Image Compression http://www.html5rocks.com/en/tutorials/speed/img-compression/ **scroll to bottom for links to apps you can use

CSS Paint Times Cause Problems http://www.html5rocks.com/en/tutorials/speed/css-paint-times/ **make sure to click the link "Continuous Paint Times" at the bottom to see how to profile paint times.

Hope this helps!

dustinhorn
  • 1
  • 1
  • Thanks, and perhaps that is the problem but scrolling actually works just fine as long as my finger is down - no jitter or anything. The problem is after a swipe - the scrolling just stops and doesn't follow the momentum of the swipe (like it does for most native scroll views). – dixkin Jan 20 '14 at 20:36
0

You can try to use Dave Taylor's jquery kinetic library to add some scrolling activity to containers: http://davetayls.me/jquery.kinetic/

user3011237
  • 31
  • 6
0

You can probably use nicescroll plugin that works on many platforms.

Installation:

<script src="jquery.nicescroll.js"></script>

Usage:

$(document).ready(

  function() { 

    $("html").niceScroll();

  }

);

Here is the reference for nicescroll plugin

Shoaib Chikate
  • 8,665
  • 12
  • 47
  • 70