2012-02-22 5 views
3

iScroll4を使用して、モバイルウェブサイト内の画像に水平スクロール効果を作成しています。 iScrollは素晴らしいですが、問題はiScrollラッパーに含まれるイメージがネイティブの垂直スクロールを無効にすることです。言い換えれば、iScrollでラップされた画像のどこにでも、ユーザーの指をスワイプしてページをナビゲートすることはできません。iScroll4をSwipeViewで使用するには?

スワイプビューはこの問題を解決することができるかもしれませんが、ドキュメント(少なくとも私にとって)は明らかではありません。誰かがスクロールビューをiScrollのラップイメージで効果的に使用する方法を知っていますか?

+0

コードを入力できますか?私は、垂直iScroll内で水平なiScrollを使用していますが、両方向で作業するので、あなたの問題についてはわかりません。 – alnafie

+0

スワイプビューを自動化する方法 - 一定時間後に画像を自動的にスワイプしますか? –

答えて

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スクロールが無効になり、そのイベントがSwipeViewで使用可能になり、方向がロックされ、垂直(iScroll)スワイプの進行中にユーザーのスワイプ方向の変更が次のSwipeViewページにスワイプされません。これらのオプションがなければ、奇妙な水平スワイプを行うことができます。

3

申し訳ありませんが、すでに作成されている回答を再現していますが、別のスペースにコードを貼り付ける必要があります。

Alastairの例は私にとってはうまくいきませんでした。私がダウンロードしたiScrollのバージョンは、クラスとのマッチングをサポートしていないようですが、オブジェクトが必要でした。だから、私のプロジェクト以来、jQueryのは、すでに私は、能動素子を渡すためにそれを使用しています。

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

私はhttp://cubiq.org/swipeviewのダウンロードでデモ/インライン/ test.htmlというの例からcarousel.onFlip()関数の最後にこれを追加

拡張テストをしていない - これは、ライブラリの使用状況を比較する際にちょっと調べているが、上のコードを使用してChromeで期待したとおりに動作している。

EDITはあまりにもここにリンクして、iPhone上のモバイルSafariでテストhttps://dl.dropbox.com/u/81328343/scroll/test.html

スライドに戻ったときに、それがジャンプして戻るということです

だけの事(それは、良いか悪いユースケースに依存している場合かわかりません)上。

+0

これは私のために他の答えよりもうまくいった。ありがとう! – TWilly