jQTouch中的iscroll橡皮筋效果

我是一名新开发人员，正在尝试创建一个jQTouch应用程序以在多个页面中显示一些可滚动内容。我决定使用iscroll，它只能在主页上正常工作。我读过我需要在每页后刷新iscroll，但我完全失去了如何做到这一点。这里是我的脚本：jQTouch中的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"有橡胶带效应，工作正常。

来源

2011-12-01 PanchoVilla00

如果您还没有想通了这一点，但（虽然我敢肯定，你有），你想：

myScroll.refresh()

或

myScroll2.refresh()

来源

2011-12-12 16:09:23 readylee1

烨我得到它...谢谢！ – PanchoVilla00

好的终于得到了这个工作。为了让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'); 
}

来源

2012-09-12 01:14:05 kaleazy

jQTouch中的iscroll橡皮筋效果

回答

相关问题