jQuery移动页面过渡iScroll刷新

Question

I've got multiple HTML pages that use the JQMobile framework; within these pages I'm using iScroll to create a native scrolling effect, all works fine.

I run into problems when using the JQM page transitions with iScroll, since it's loaded via ajax I know that I need to refresh iScroll on the new page so that it can correctly calculate the height and width after the DOM has changed.

I've looked into this and experimented with code (tried refresh() and destroying and recreating) but can't see to get it work, the iScroll works it's just not getting refreshed on page change (therefore not working), any ideas?

Code below!

<div data-role="page">
    <div data-role="header">

    </div><!-- /header -->

    <div data-role="content">
    <div id="wrapper">
        <div id="scroller">
            <p>Page content goes here.</p>
            <a href="jquery_mobile_2.html"  data-transition="slide">Page 2</a>
        </div>
    </div>
    </div><!-- /content -->

    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a data-ajax="false" href="javascript:void(0);" onClick="homepage();"><img width="34px" height="34px" src="images/home_IMG_v2.png" /><!--<span class="nav">Home</span>--></a></li>
                <li><a data-ajax="false" href="Guide.html" class="ui-btn-active ui-state-persist"><img width="35px" height="33px" src="images/guide_IMG_v2.png"><!--<span class="nav">Guide</span>--></a></li>
                <li><a data-ajax="false" href="TaxCalculator.html"  /><img width="76px" height="34px" src="images/calculator_IMG_v2.png" /><!--<span id="calc" class="nav">Calculator</span>--></a></li>
            </ul>
        </div>
    </div><!-- /footer -->
</div><!-- /page -->

Using refresh()

var myScroll;

function loaded() {

    myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});

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

}


document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

Destroying iScroll and recreating

var myScroll;

function loaded() {

    myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});

   setTimeout(function() {      
        myScroll.destroy();   
        myScroll = null;
        myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});  
   }, 100);

}


document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

Answer 1

Try calling initialising iScroll when the jqm pageshow event fires eg in jqm 1.3.1:

$(document).on('pageshow', function (event, ui) {
    myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});
});

Answer 2

after domchanges you need refreshing iscroll

$('#videotagisc').iscrollview("refresh");

this not working means use setTimeout

setTimeout(function(){
 $('#videotagisc').iscrollview("refresh");
},100);

Answer 3

var width   = $( window ).width();
var height  = $( window ).height();
var delay = 200;
var doit;

function keop() {
    $("#wrapper").css({"height":height+"px","width":width+"px"});
    setTimeout( function(){
        myScroll.refresh() ;
    } , 200 ) ; 
}

/* < JQuery 1.8*/
window.addEventListener("load", function(){
    clearTimeout(doit);
    doit = setTimeout(keop, delay);
});

/* > JQuery 1.8*/
window.on("load", function(){
    clearTimeout(doit);
    doit = setTimeout(keop, delay);
});