jQTouch中的iscroll橡皮筋效果

Question

我是一名新开发人员，正在尝试创建一个 jQTouch 应用程序来在多个页面中显示一些可滚动内容。我决定使用 iscroll，它只在主页上运行良好。我读过，我需要在每页后刷新 iscroll，但我完全不知道如何做到这一点。这是我的脚本：

<script type="text/javascript">
    var myScroll, myScroll2;
    function loaded() {
        setTimeout(function () {
            myScroll = new iScroll('wrapper1');
        }, 100);
        setTimeout(function () {
            myScroll2 = new iScroll('wrapper2');
        }, 100);
    }

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

在我的 html 中，我有一个 div id="wrapper1" ，它工作正常，直到我导航到 div id="wrapper2" 所在的第二页橡皮筋效应。

Answer 1

如果您还没有弄清楚这一点（尽管我确信您已经弄清楚），您想要：

myScroll.refresh()

或

myScroll2.refresh()

Answer 2

好的，终于开始工作了。为了让 jQTOuch 和 iScroll 能够很好地配合，每次 JQTouch 使页面上的滚动区域消失时，都需要重置它们。换句话说，一旦隐藏 div，iScroll 就不知道下次它可见时要滚动什么。因此，你会得到臭名昭著的橡皮筋效应。要解决此问题，只需添加一个事件侦听器，在调用 div 后立即重置滚动区域。确保给它 100 到 300 毫秒的延迟。下面的代码假设您的变量名为 myScroll：

$(".about").tap(function(){
    setTimeout(function(){myScroll.refresh()},300);
});

顺便说一下，以下是如何使用 iScroll 建立多个滚动条：

var scroll1, scroll2;
function loaded() {
    scroll1 = new iScroll('wrapper1');
    scroll2 = new iScroll('wrapper2');
}