検索
ホームページウェブフロントエンドjsチュートリアルJS ホイール イベント (mousewheel/DOMMouseScroll) を理解する

JS ホイール イベント (mousewheel/DOMMouseScroll) を理解する

JS ホイール イベント (mousewheel/DOMMouseScroll) の理解

1. 学習に終わりはありません。過去を経て新しいことを学ぶ

//zxx: この段落はテクノロジーとは何の関係もありません。いくつかの非常に個人的な苦情は読み飛ばしていただいても構いません。
小学生の頃に持っていた写真による記憶はもうありません。たった1年で色々なものを作ったり、自分と触れ合ったりしましたが、その後は全く覚えていません。たとえば、要素とページの間の距離を取得するメソッド (getBoundingClientRect) や、最新のブラウザで DOM カスタム イベントをトリガーするメソッド (dispatchEvent) を思い出せません。きちんと復習したり、前に読んだことを読んだり、少し時間ができたり、関連することに取り組む時間はやはり必要です。実は、よく考えてみると、物を覚えられないのは自分のせいで、(繰り返し使って覚えたというよりも)いじっていたときに覚える方法を見つけられなかったのです。たとえば、getBoundingClientRect は「クライアントの四角形の境界を取得する」を意味するか、または「カット (g) フォース (b) ファック (c) ソフト (r)」を覚えるために邪悪な表記法を使用します。 dispatchEventメソッドは「作成(createEvent) - 初期化(init*Event) - ディスパッチ(dispatchEvent)」の「3ステップ」を使用します。

学習のペースは止まらない。最後まで生き残る「変態」たちにも、知らないことがあるはずで、当然のことながら、私たち後輩、特に若い頃の自分たちは、さらに知らないことのほうが多いのです。幼い頃に「道はどこだ?」「どっちに行けばいいんだろう?」と多かれ少なかれ混乱したことのある人は、何を選択しても、学習のスピードは止まらないものです。辛抱強く続ければ、道は明らかになり、次にどこへ行くべきかがわかります。弱気でヨタヨタしながら、若さが資本、迷わず前に進んでください。

私は興味に基づいて現在の道を進んでいます。これは純粋に興味のある学習 (これらのことが好きで、学びたい) であり、専門的な学習ではありません (フロントエンドの仕事を行うために必要なものは何でも学びます) )。ここ何年も仕事をしてきた中で、テクノロジーや製品に没頭することで知らず知らずのうちに視野が狭くなってしまいましたが、幸いなことに、問題の存在に気づいたことで問題の半分は解決しました。なぜこんなことを言うかというと、「無理は禁物です。技術や製品について学ぶことは、やはり大切です。もっと調べて、オフィスの外の世界(閲覧による表面的な理解ではなく)に目を向ければいいのです」と自分に言い聞かせるためです。微博)。

昨日偶然「ホイールイベント」を知りました。以前「カスタムスクロールバー」について悩んでいたときにマウスホイールイベントを使用しましたが、これはMooToolsがすでに互換性のあるマウスホイールイベントをベースにしています実装の仕組みやブラウザの互換性の違いなどを教えていただければと思いますが、私は唖然としました。学びに終わりはないので、調べて、実践して、整理してみましょう。

2. 互換性の相違点の完全なリスト

スクロール ホイール イベントの互換性の相違点は、以前の IE8 派とその他の派閥ではなく、FireFox 派とその他の派閥によるもので、多少折衷的です。

IE6 を含むブラウザでは onmousewheel が使用されますが、FireFox ブラウザでは DOMMouseScroll が使用されますが、私がテストしたところ、FireFox 19 でも onmousewheel が認識されませんでした。

最も単純な使用方法の違いの 1 つ (本文スクロール バーは、特定の高さの内部 div によってサポートされています):

document.body.onmousewheel = function(event) {
イベント = イベント || window.event;
console.dir(event);
};

##document.body.addEventListener("DOMMouseScroll", function(event ) {

console.dir(event);
});

上記の出力の違いを以下に示します (IE7、IE10、Chrome、および FireFox、下にスクロールして、win7) (このページをクリックすると、テーブルの内容を個別に表示できます):

3. 互換性のあるホイール イベント メソッド

自分と敵を知れば、勝利することができます。違いを知れば、それらにどう対処するかがわかるでしょう。結局のところ、私たちは JS ライブラリを作成しているのではなく、ここではスクロール方向の違いのみを扱います。

通常のイベント追加メソッドを統合すると、次のようになります (以下のコードは addEvent.js):

/**
 * 简易的事件添加方法
 */
 define(function(require, exports, module) {
    exports.addEvent = (function(window, undefined) {        
        var _eventCompat = function(event) {
            var type = event.type;            if (type == 'DOMMouseScroll' || type == 'mousewheel') {
                event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
            }
            //alert(event.delta);
            if (event.srcElement && !event.target) {
                event.target = event.srcElement;    
            }
            if (!event.preventDefault && event.returnValue !== undefined) {
                event.preventDefault = function() {
                    event.returnValue = false;
                };
            }            /* 
               ......其他一些兼容性处理 */
            return event;
        };
        if (window.addEventListener) {
            return function(el, type, fn, capture) {                if (type === "mousewheel" && document.mozHidden !== undefined) {
                    type = "DOMMouseScroll";
                }
                el.addEventListener(type, function(event) {
                    fn.call(this, _eventCompat(event));
                }, capture || false);
            }
        } else if (window.attachEvent) {
            return function(el, type, fn, capture) {
                el.attachEvent("on" + type, function(event) {
                    event = event || window.event;
                    fn.call(el, _eventCompat(event));    
                });
            }
        }
        return function() {};    
    })(window);        
});

これで、マウスホイール イベントを簡単に使用できるようになります。例:

addEvent(dom, "mousewheel", function(event) {
    if (event.delta < 0) { alert("鼠标向上滚了!"); }
});

関連コードは次のように実装されています。以下に、スムーズな動きのためのコア コード (コード名 slide.js) を示します。

/**
 * 简易的列表左右滑动切换效果
 * 鼠标事件是关键,因此,一些数值写死在方法中,纯测试用
 */
 define(function(require, exports, module) {    var Event = require("/study/201304/addEvent.js");
    var _move = function(ele, to, from) {        // 动画实现
        // ...
    };
    return {
        index: 0,
        visible: 4,
        init: function(box) {            // box指滚动的列表容器
            var self = this
              , length = box.getElementsByTagName("li").length;            Event.addEvent(box.parentNode, "mousewheel", function(event) {
                 if (event.delta > 0 && self.index > 0) {                    // 往上滚
                    self.index--;
                 } else if (event.delta < 0 && self.index < length - self.visible) {                     // 往下
                     self.index++;                     
                 } else {
                    return; 
                 }
                 _move(box, -1 * self.index * 140);    
              
                 event.preventDefault();
            });
        }
    };
});

原理は非常に単純で、スクロール ホイールです。つまり、リストの最終位置が変化し、アニメーションがターゲット位置に到達します。

これで、seajs を使用して簡単にデモ ページを呼び出すことができます。

var $ = function(id) {
    return document.getElementById(id);
};
seajs.use("/study/201304/slide.js", function(slide) {
    slide.init($("slideBox"));
});

That's it. HTML 部分やアニメーションの実装など、特定の詳細については、デモに移動してコード表示を確認できます。

ただし、効果から判断すると、IE6 および IE7 ブラウザでのスクロールには保留ページのスクロール バーがありません。他の多くの試みにも同じことが当てはまります。関連した経験を持つ同僚が指導し、最適化できることを願っています。 IE7/IE7 ブラウザでスクロールすると、その効果を体験できます。

もともと、カスタム スクロール バーのデモを追加したかったのですが、時間を確認すると、すでに 1:11:11 になっていました。なんとも不運な数字です。プログラマーのFortune Perpetual Calendar. 、今日はデモを書くのに良い時期ではありません。というわけで、寝るエピローグ。

推奨チュートリアル: 「JS 基本チュートリアル

以上がJS ホイール イベント (mousewheel/DOMMouseScroll) を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はliqingboで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール