JavaScript マウス ホイール イベント_JavaScript スキル

今日はスクロールホイールに応答する関数をネットで見つけて以下のクラスに書き換えました

コードをコピー コード

function WheelEvent(obj, handle)
{
this.handle = handle;
// Firefox と IE 間の異なるイベント
window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this.wheel);
}
wheelEvent.prototype.wheel = function (event)
{
var ev = event || window.event ;
var delta = ev.wheelDelta / 120) : (- ev.detail / 3); // Firefox は `wheelDelta` を使用します。 🎜>eval ('delta ? 'parent .handle '(delta) : null;');
}

使用する場合は、上記のクラスから取得した値を指定し、指定された Web ページ要素にイベントを追加します。たとえば、

コードをコピー コードは次のとおりです。

function handle(delta)
{
document.getElementById('text').scrollTop -= デルタ * 20;
new WheelEvent(document.getElementById('text'),

上記の例では、最初のパラメータはスクロール ホイール イベントを追加する Web 要素、テキストの ID を持つ div で、2 番目のパラメータは実行関数の名前、ハンドルです。
ハンドル関数にはパラメーター デルタが 1 つだけ必要であり、ホイールが上に上がるとデルタは 0 より大きくなり、下に下がるとデルタは 0 より小さくなります。上記の例のハンドル関数の機能は、スクロール ホイールを使用して div にスクロール バー関数を実装することです。