jQuery移動頁面過渡iScroll刷新

Question

我有多個使用JQMobile框架的HTML頁面。 在這些頁面中，我使用iScroll創建本機滾動效果，一切正常。

在iScroll上使用JQM頁面過渡時，我遇到了問題，因為它是通過Ajax加載的，所以我知道我需要刷新新頁面上的iScroll，以便在DOM更改后可以正確計算高度和寬度。

我對此進行了研究，並嘗試了代碼（嘗試了refresh（）並銷毀並重新創建），但無法使其正常運行，iScroll的工作原理只是頁面刷新時沒有刷新（因此不起作用），有什么想法嗎？

代碼如下！

<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 -->

使用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);

銷毀iScroll並重新創建

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

嘗試在jqm pageshow事件觸發時調用初始化iScroll，例如在jqm 1.3.1中：

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

Answer 2

domchange之后，您需要刷新iscroll

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

這不起作用意味着使用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);
});