iScroll 5 not working when 2nd page should be scro

Question

I'm using apache cordova 2.2

      jquery 1.7.2
      jquery mobile 1.4.3
      iscroll 5 (Matteo Spinelli ~ http://cubiq.org/)

I have the following index.html:

<div data-role="page" id="id1">
    <div data-role="header" data-position="fixed">
    </div>
    <div data-role="content" id="id2">
    </div>
    <div data-role="footer" data-position="fixed">
    </div>
</div>

<div data-role="page" id="thisshouldscroll">
    <div data-role="header" data-position="fixed">
    <div id="buttondiv" data-role="navbar">
                    some buttons
    </div>
    </div>
    <div data-role="content" id="id4">
        <!-- need scrollable list here -->
        <div id="wrapper" >
          <div id="scroller">

          </div>
        </div>        
    </div>
    <div data-role="footer" data-position="fixed">
       <div id="bottombuttondiv" data-role="navbar">
           some buttons
       </div>
    </div>
</div>

<div data-role="page" id="id5">
    <div data-role="header" data-position="fixed">
    </div>
    <div data-role="content" id="id6">
    </div>
    <div data-role="footer" data-position="fixed">
    </div>
</div>

I display the scrollable page id="thisshouldscroll" as follows:

$.mobile.changePage( "#thisshouldscroll", { transition: "slideup"} );  
buildScrollingData();
myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: true
});

Elsewhere i have defined:

function displayScrollingData(){
     var contentToAppend="";

     //loop web service data add certain data to contentToAppend with
         contentToAppend = contentToAppend +
                          str1 + "<BR>" +
                          str2 + "<BR>" +
                          str4 + "<BR>" +
                          str3 + "<BR><BR>";

     $("#scroller").append(contentToAppend);

}

function buildScrollingData(){
      //call a web service, put results in an array
      dispayScrollingData()
}

I also have:

function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
}

The data is not scrolling and I'm wondering if my initialization is screwed up somehow.

page id="thisshouldscroll" is displayed 2nd in my app.

Does anyone know the proper order to initialize iScroll 5 when its the 2nd page that should have the scrolling capabilities?

If the initialization is ok, can anyone suggest what I'm missing?

Answer 1

For Iscroll 5 i have it Set up in the following Manner. If you like the scroll on Multiple pages then give myscroll and wrapper a unique name for the page. Document Ready is for testing Purposes so use required JQM process upon Page initialization. Also as note, because wrapper has Top and Bottom pixels <div data-role="content" ... is not actually needed to get the scroler functioning.

 var myScroll;

 $(document).ready(function(){ 

        myScroll = new IScroll('#wrapper',
                        {
                            scrollX: false, 
                            scrollY: true
                            ,click:true // open click event
                            ,scrollbars: false 
                            ,useTransform: true
                            ,useTransition: false
                            ,probeType:3,
                            mouseWheel:true,
                            bindToWrapper: true
        });

});


 function initscroll() {

    setTimeout(function () {
            myScroll.refresh();
        }, 1000);
    }

refresh the scroll as you need to on Pageshow or After Apending Data to the list

initscroll()

I also use the following HTML and append data to ID (listview)

<div data-role="content" id="main" class="custom_content">
    <div id="wrapper" class="wrapper">
       <div id="scroller">
             <ul data-role="listview" id="listview">
             </ul>
        </div>
      </div>
</div>

Demo Ignore the long code in the fiddle that's the Iscroll Plugging, scroll down till you see //// JQM STUFF

http://jsfiddle.net/z50cg1jf/

Update Nov 2014 -- for Android Webviews tested on (Kitkat, using Webchrome) API 19

If you are experiencing bad scroll performance on an Android phone or tablet remove

probeType:3

and set transition to true

useTransition: true

Also enable Hardware Acceleration on your Android webview App.

Iscroll 5 should now fly. I spent hours trying to improve the Iscroll performance on webview and by chance i tried the above.