IScroll 5 does not work when the 2nd page should be scrollable

Question

I am 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 am showing the id = "thisshould scroll" scrollable page as follows:

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

In another place, I 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 does not scroll, and I wonder how my initialization is somehow screwed.

page id = "thisshouldscroll" appears 2nd in my application.

Does anyone know the correct initialization order of iScroll 5 when its second page should have scroll capabilities?

If the initialization is ok, can anyone suggest that I am missing?

Answer 1

For Iscroll 5, I have the setting in the following order. If you like scrolling across multiple pages, give myscroll and wrapper a unique name for this page. The document is ready for testing purposes, so use the required JQM process when initializing the page. Also, as a note, since the wrapper has upper and lower pixels <div data-role="content" ... not really needed for the scroller to work.

  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 scrolling as you need in the "Pages" or "After receiving data" window to the list

 initscroll() 

I also use the following HTML and add data to the 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 script that is connected to Iscroll, scroll down until you see //// JQM STUFF

http://jsfiddle.net/z50cg1jf/

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

If you encounter poor scroll characteristics on your Android phone or tablet, delete

probeType: 3

and set the transition to true

useTransition: true

Also enable hardware acceleration in the Android web app.

Spark 5 should now fly. I spent hours trying to improve Iscroll's web browsing performance and accidentally tried this.