そのため、Zeptoライブラリを使用して、左右にスクロールする要素のリストに対してスワイプアクションを実行しています。コードは次のように非常に単純です。
Zepto('#planlist').swipeRight(function() {
self.click_left();
});
Zepto('#planlist').swipeLeft(function() {
self.click_right();
});
クリックボタンと同じアクションを呼び出すだけです。
click_left: function() {
if(this.position > 0) {
-- this.position;
this.animate();
}
},
click_right: function() {
if(this.position < this.plans.length - 1) {
++ this.position;
this.animate();
}
}
いずれかの方法。問題は、preventDefault()
スクロールにを設定しない限り、斜めにスワイプするとスワイプがトリガーされ、ページがスクロールされることがあります。これは問題です。ページスクロールが発生している間、アニメーションがレンダリングされないためです。ただし、を使用するpreventDefault()
と、ユーザーがこの領域に触れたときに上下にスクロールできなくなります。これは問題です。電話デバイスでは、この小さな領域が画面全体を占めるため、ユーザーはページを上下にスクロールできません。
したがって、問題は次のとおりです。左右にスワイプしてpreventDefaultを作成し、上下にタッチスクロールする機能を維持できますか?