javascript - タッチパッドの 2 本指スクロール js

Question

横向きのサイトを開発し、2 本の指で左右に移動するタッチパッド コントロールを実装したいと考えています。

タッチパッド上で 2 本の指を左右に動かすと、サイト ページが左右にスクロールされます。これで、2 本の指が上下に移動し、ページが左右にスクロールするタッチパッド コントロールが実装されました。

jsまたはjQueryを使用して、2本の指を上下から左右に動かしてサイトページを左右にスクロールするタッチパッドコントロールを変更するにはどうすればよいですか?

Answer 1

少し遅れているかもしれませんが、この質問に出くわす前に同じ質問がありました。もう少し調査した結果、トラックパッドのスクロールをキャプチャする最善の方法はwheelイベントであると考えるようになりました。

function doScroll(e) {
    // positive deltas are top and left
    // down and right are negative

    // horizontal offset    e.deltaX
    // vertical offset      e.deltaY

    console.log(`x:${e.deltaX} y:${e.deltaY}`);

    e.preventDefault(); // disable the actual scrolling
}

window.addEventListener("wheel", doScroll, false);

スクロール方向とオフセット値を通知するフィドルを用意しましたが、スクロール自体はできません。

wheel イベントには、 (少なくとも Chrome では) 運動量に敏感なデルタ プロパティがあり、イベントで使用可能な絶対スクロール位置ではなく、現在の相対スクロール オフセットを提供しますscroll。

Answer 2

通常、スクリプトでタッチ イベントを引き継ぐ場合は、次のようなものを追加して、通常のスクロールとズームを防止します。

$("body").bind("touchstart", function(e) {
    e.preventDefault();
})

Answer 3

あなたがする必要があるのは、スクロールできるものを変更することです。ページが左右にスクロールするのに十分な大きさである場合、ブラウザはそのようにスクロールすることを許可します。

基本的に、ある方向にスクロールさせたい場合は、その方向にのみコンテンツを作成します。必要に応じて、オーバーフローを none に設定して、必要な特定のサイズのコンテナー div を作成することで、これを実現できます。