iscroll dom更改

Question

我让iScroll正常工作。我已经添加了一个jQuery字体大小插件到3个包含文本的可滚动div中。在使用"A+“增加文本大小时，我得到了预期的”橡皮筋“效果

我知道MASTERING THE REFRESH() METHOD，但是我不知道如何正确地实现它。

我的iscroll代码是

var scroll1, scroll2, scroll3,
scrollNav;

function loaded() {
 setTimeout(function () {
    scrollNav = new iScroll('transition1', { useTransition:true });
    scroll1 = new iScroll('scrollpage01', { useTransition:true });
    scroll2 = new iScroll('scrollpage02', { useTransition:true });
    scroll3 = new iScroll('scrollpage03', { useTransition:true });
   }, 250);
}

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

其中一个带有文本的div的示例如下

<article id="scrollpage01">
<div id="contentScroller">
    <div class="box">
         <a class="jfontsize-button" id="jfontsize-m" href="#">A-</a>
         <a class="jfontsize-button" id="jfontsize-d" href="#">A</a>
         <a class="jfontsize-button" id="jfontsize-p" href="#">A+</a>

        <p class="some-class-name">Lorem ipsum dolor sit amet, ....blah blah blah.... suspendisse potenti.
        </p>

        <script type="text/javascript" language="javascript">
            $('.some-class-name').jfontsize({
                btnMinusClasseId: '#jfontsize-m',
                btnDefaultClasseId: '#jfontsize-d',
                btnPlusClasseId: '#jfontsize-p'
            });
        </script>
    </div>
</div>
</article> 

现在，我可以如何/在哪里添加

setTimeout(function() { scroll1.refresh(); }, 0);

Answer 1

哦，这有多简单……使用完整的iscroll.js而不是精简版并添加checkDOMChanges: true

<script type="text/javascript">
    var scroll1, scroll2, scroll3,
    scrollNav;

    function loaded() {
     setTimeout(function () {
       // scrollNav = new iScroll('navWrapper');
        scrollNav = new iScroll('transition1', { useTransition:true });
        scroll1 = new iScroll('scrollpage01', { useTransition:true, checkDOMChanges: true });
        scroll2 = new iScroll('scrollpage02', { useTransition:true, checkDOMChanges: true });
        scroll3 = new iScroll('scrollpage03', { useTransition:true, checkDOMChanges: true });
       }, 250);
    }

   document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
   document.addEventListener('DOMContentLoaded', loaded, false);
</script>

Answer 2

您还可以在Dom更改或Dom高度更改时调用refresh()函数。

setTimeout(function() { scroll1.refresh(); }, 200);

确保在iScroll加载到Dom之后调用refresh()函数。在dom之后，完全更改，然后只使用setTimeout调用refresh()函数。