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橡皮筋效果

回答

相關問題