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 サイトの他の関連記事を参照してください。