javascript - トラックパッドでのjqueryマウスホイールの水平スクロール. deltaX と deltaY の間の衝突を避ける

Question

水平スクロール Web サイトに jquery マウスホイール プラグインを使用しています。マウスホイールの垂直方向の動きは、水平方向のスクロールに変換されます。トラックパッドを使用すると、右にスクロールするか左にスクロールするかが明確でない場合があるため、競合が発生します。(たとえば、トラックパッドで右上に移動した場合)

このページのようにスムーズに動作させるにはどうすればよいですか: http://www.yangrutherford.com/en/work

$('#scroll').on('mousewheel', function(event, delta, deltaX, deltaY) {
    this.scrollLeft -= (delta * 1.5);
    event.preventDefault();
});

Answer 1

私は垂直方向のみのホイールを備えたマウスを持っていませんが、デルタ コンポーネントが大きい方がユーザーの意図を示していると思います。動きが非常に遅いか、ユーザーが任意の方向に 45 度移動しない限り、これは私にとってはうまくいきます。

$('#scroll').on('mousewheel',function(event, delta, deltaX, deltaY) {
    event.preventDefault();

    //use whichever component (deltaX or deltaY) that has the largest absolute value
    // deltaX needs negated to have natural scroll motion
    var singleDelta = (Math.abs(deltaX)>Math.abs(deltaY)) ? (-1 * deltaX) : deltaY;

    this.scrollLeft-= (singleDelta * 1.5);
});