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');
}

jQTouch中的iscroll橡皮筋效果

2 个答案: