CODEWITHSUNDEEP
ioscordovajquery-uijquery-mobilephonegap-build
Jurgen Cuschieri
Jurgen Cuschieri

Reputation: 736

How to get a smooth and fast scroll in iOS in a Cordova app without JQuery Mobile script

I am developing a Cordova application which previously used the JQuery mobile 1.4.5 script. A previous problem on Android, where transitioning from a page to another caused unnecessary flickering left me no choice but to remove the call to the JQuery mobile script. 

<script src="js/jquery.mobile-1.4.5.js"></script>

Instead I simply left the CSS 

<link href="js/jquery.mobile-1.4.5.css" rel="stylesheet" />

and used the JQuery mobile classes to change the styles of inputs, buttons, etc, retaining the previous app style (this was highly important especially considering that the app is almost finished and the design in which jquery mobile was heavily used needed to be retained).

When I did this I found out that on iOS the scrolling was no longer fast and smooth as it was before. I tried to revert to the old method, i.e. having the j-query mobile script and the iOS smooth works normally. This proves that J-Query mobile had some specific script that 'fixes' the iOS scroll. I would like to use just this script to fix the scrolling problems. Apart from this problem, the app works and looks just fine.

Below is the 'template' html of every page. As you can see the jquery-mobile classes that are normally automatically wrapped around the components of the app after the page loads are manually assigned to the specific components. 

<html class="ui-mobile js csstransitions">
<head>
</head>

<body class="ui-mobile-viewport ui-overlay-a sidy--panels-closed">
    <div class="sidy ui-page ui-page-theme-a ui-page-active">

        <nav>Menu</nav>
        <nav>Search</nav>

             <div class="sidy__content">
                  <div id="wrapper" class="wrapper">
                      <div>Fixed header</div>
                      <div>Container</div>
                      <div>Fixed Footer</div>
                  </div>
             </div>
    </div>
    <script></script>
</body>
<html>

I tried to search intensively on stackoverflow and other sources. For e.g. this fix did not work when tried on the tag; as the fixed header and footer move with the scrolling and only restore to their original position when the scrolling operation is finished. When trying to assign the class on the container (where the actual scrolling needs to happen); nothing happens.

cssClass{
         overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
}

What would be most useful to me is to know which part of the Jquery mobile script makes the iOS scrolling look smooth and native and act very fast!

Thank you for your help!

Upvotes: 0

Views: 3361

Answers (1)

Leif John
Leif John

Reputation: 818

Your css'ed div needs for IOS (Safari) to have a non-dynamic size in the scroll direction, i.e. the height in your example.

Add a height element: 

cssClass{
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: ...px;
}

and it should work.

I had the same problem, and was able to solve it with this added property. I use React.JS so, I could easily get computed the height so that it was correct for different devices, adjusted for headers and footers etc. With Javascript you can do compute it with the variable window.innerHeight (at least for Cordova, I don't know if this is a standard browser variable).

Upvotes: 3

Related Questions