Jquery 모바일 페이지 전환 iScroll 새로 고침

Question

JQMobile 프레임 워크를 사용하는 여러 HTML 페이지가 있습니다. 이 페이지에서 iScroll을 사용하여 네이티브 스크롤 효과를 만들었습니다. 모두 잘 작동합니다.

iScroll을 사용하여 JQM 페이지 전환을 사용할 때 문제가 발생합니다. 왜냐하면 ajax를 통해로드되기 때문에 DOM이 변경된 후에 높이와 너비를 올바르게 계산할 수 있도록 iScroll을 새 페이지에서 새로 고침해야한다는 것을 알고 있습니다.

코드를 실험 해 보았습니다. (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 --> 

사용하여 새로 고침()

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을 파괴하고, 예를 들어 때 JQM의의 pageshow 이벤트가 발생 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 1.3.1 : domchanges 후

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

Answer 2

는 당신이 필요로 상쾌한 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); 
});