ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript マウス ホイール イベント_JavaScript スキル

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

WBOY
リリース: 2016-05-16 18:54:17
オリジナル
943 人が閲覧しました

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


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 にスクロール バー関数を実装することです。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート