フリックとスクロールを同時に実装するには

質問

フリックで左右に画像をスライドできるライブラリ(flickable)をカスタマイズし、スマホ用のギャラリーを作成しているのですが、この「フリックできる画像」の上ではページをスクロールすることができません。
（windowに伝わる前にギャラリーのdom要素で止まってしまっている？）
フリックとスクロールを同時に行うためにはどのような処理が必要になるかお分かりになりますでしょうか？
ライブラリの紹介ではなくコード的なご指南を頂けると助かります

よろしくお願いいたします

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

if( ontouchmoveの方向がフリックの方向なら ){
　event.preventDefault()を実行してスクロール処理を止め、
　フリックの動作を実行
}else { // (フリックの方向でなければ)
　何もしない。
}

お礼

なるほど！
event.preventDefault() でブラウザ本来の処理を止めることが出来るのですね
anyhelpさんの解説と合わせて実装の目途がつきました
ありがうございました！

回答No.1

anyhelp

概念的な話ですが、２つのイベントをまず作ります。
フリックイベントとスクロールイベントです。それぞれのハンドラをリスナーでつなぎます。

ところでフリックもスクロールもタッチダウンしてタッチアップするまでのイベントの間にタッチの移動イベントがなければ発生しませんね。フリックが判定された場合、スクロールする必要は無いことがわかります。一方でフリックが判定されなければ、スクロールを判定させればよいことがわかります。つまりフリックというイベント処理を優先処理し、フリックイベントがキャンセルされる条件を決めて、そのキャンセルの場合にのみスクロールイベントを発動させるようにします。そうするとフリックしない場合はスクロールイベントハンドラでスクロールイベントをキャプチャできるようになります。

お礼

「フリックの動作がスクロールを邪魔している」という点ばかりを考え、仕組みをきちんと理解していませんでした。
おかげで全体的な処理の流れを理解することが出来ました。
ありがとうございました！