iScroll 5 not working when 2nd page should be scrollable

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?

Eudemonism

Use at least jquery 1.8.3 with JQM 1.4. Also, you may need to append elements before initializing iscroll as it adds extra markup to scrollable div. – Pyszka

i have added jquery 1.8.3 and moved the myScroll init to immediately after $("#scroller").append(contentToAppend); in displayScrollingData() but it didn't work – Eudemonism

Then You neef to initialize iScroll on pagecontainershow. You can for now use pageshow event delegated to #thisshouldscroll page. – Pyszka

You are appending data to the scroll so you need to refresh the scroller. (setTimeout(function () { myScroll.refresh(); }, 500);) – Evalyn

@Pyszka i opted to use pagecontainershow since i read pageshow has been deprecated. is there any reason i shouldn't do that? also should the functionality of dispayScrollingData() also be put in pagecontainershow? if so, should it be before or after the init of myScroll? – Eudemonism

@Evalyn i added the timeout at the end of pagecontainershow and it had no effect. does the timeout need to be associated with a particular element's id? – Eudemonism

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.

Evalyn