如何在SwipeView中使用iScroll4？

Question

我正在使用iScroll4在移動網站上的圖像上創建水平滾動效果。 iScroll非常棒，但問題是iScroll包裝器中包含的圖像會禁用本機垂直滾動。 換句話說，在iScroll包裝圖像內的任何位置禁用用戶的手指滑動以導航頁面。

SwipeView可能能夠解決這個問題，但文檔（至少對我來說）並不是那么清楚。 有誰知道如何在iScroll包裝圖像上有效使用SwipeView？

Answer 1

很抱歉幾乎重現了已經做出的答案 - 但我需要將一些代碼粘貼到不同的空間。

阿拉斯泰爾的例子並不適合我。 我下載的iScroll版本似乎不支持匹配類，它想要一個對象。 因為我的項目已經有了jQuery，所以我用它來傳遞活動元素。

scroller = new iScroll($('.swipeview-active')[0], {
  hScroll: false,
  lockDirection: true,
  hideScrollbar: true,
  fadeScrollbar: true
});

我在http://cubiq.org/swipeview下載的demo / inline / test.html示例中將此添加到carousel.onFlip()函數的末尾

還沒有進行擴展測試 - 這只是我在比較庫的使用時所看到的一些內容，但它正如您在Chrome中使用上述代碼所期望的那樣工作。

編輯剛剛在iphone手機游戲測試中也鏈接到這里https://dl.dropbox.com/u/81328343/scroll/test.html

唯一的事情（不確定它的好壞，取決於用例）是當返回到幻燈片時它會跳回到頂部。

Answer 2

我發現文檔非常缺乏，但這樣的東西對我有用：

function swipeView(wrapper){
        wrapper = new SwipeView('#wrapper', {
        numberOfPages: pages.length
    });

    wrapper.onFlip(function(){
        scroller = new iScroll('.swipeview-active', {
            hScroll: false,
            lockDirection: true
        });
    });
}

這會在刷到當前的SwipeView頁面時初始化iScroll。 水平iScroll-scrolling被禁用，使該事件可用於SwipeView並且方向被鎖定，因此當垂直（iScroll）滑動正在進行時，用戶滑動方向的更改將不會滑動到下一個SwipeView頁面。 如果沒有這些選項，可以進行奇怪的水平滑動。