Question

我的iScroll工作正常。我已经在包含文本的3个可滚动div中添加了一个jQuery font sizer插件。在使用“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而不是lite并添加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);

确保在Dom中加载iScroll后调用refresh（）函数。完全dom更改后，只需使用setTimeout调用refresh（）函数。

iscroll dom的变化

2 个答案: