4

マウス ホイールを使用してコンテンツをスクロールする場合div、たとえば、30px各ステップまたは各マウス ホイール ティック w/e でスクロールするのが最適なソリューションです。
私はperformance > ease好むjavascript > jquery

4

2 に答える 2

7

だから私は自分の解決策をいじりました。ここで例を見ることができますこの答えに導いてくれたTom
に 感謝します。

JS:

function wheel($div,deltaY){
   var step = 30;
   var pos = $div.scrollTop();
   var nextPos = pos + (step*(-deltaY))
   console.log("DelatY: " + deltaY + ", Step: " + step + ", nextPos: " + nextPos);
   $div.scrollTop(nextPos);
}

$('#test').bind('mousewheel', function(event, delta, deltaX, deltaY) {
    wheel($(this),deltaY);
    event.preventDefault();
});

使用ライブラリ:

  • jQuery1.8.3
  • jQuery マウスホイール
于 2013-09-02T02:20:42.760 に答える
6

ブラウザーが現在実行している (AFAIK) 3 つの異なる動作があるため、マウスホイールの詳細を自分で実装するには大きな問題があります。現在、Firefox を除くすべてがmousewheelイベントをサポートしており、 wheelDelta「クリック」ごとに 120 のパラメーターを渡します。Firefox にはDOMMouseScrollイベントがあり、detail「クリック」ごとに3（と思います）のパラメーターで、反対方向です。Apple デバイスの解像度ははるかに細かく、減速があります。そのため、Webkit ブラウザーは 2 つの軸のデルタも提供し、トラックパッドの 2 本指スクロールに「クリック」はありません。最後に、DOM Level 3 Events ドラフト標準では、「クリック」を (私が思うに) 1 と定義し、3 つの軸の可能性を提供します。そのため、コードを将来的に保証する必要があります。そのため、独自のホイール ハンドラーを実装するのはちょっと面倒です (現在、マウスホイールを使用して SVG アプリのズームを実装しているのでわかります)。

詳細については、Javascript: The Definitive Guide の 17.6 章の Mousewheel Events を参照してください。

于 2013-09-02T01:36:52.030 に答える