У меня есть несколько HTML-страниц, которые используют структуру JQMobile; в этих страницах я использую iScroll для создания естественного эффекта прокрутки, все работает отлично.Переходы на мобильные страницы JQuery Обновление iScroll
У меня возникают проблемы при использовании переходов страницы JQM с помощью iScroll, поскольку он загружается через 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 -->
Использование обновления()
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);