Understanding JS wheel events (mousewheel/DOMMouseScroll)

JS wheel event (mousewheel/DOMMouseScroll) understanding

1. There is no end to learning, review the past and learn the new

//zxx: This paragraph has nothing to do with technology. Some very personal complaints can be skipped.
I no longer have the photographic memory I had when I was a primary school student. I have made many things and come into contact with myself in just one year. I don’t remember it at all after that. For example, I can’t remember the method of getting the distance between an element and the page (getBoundingClientRect), or I can’t remember the method of triggering a DOM custom event (dispatchEvent) in modern browsers. Obviously, you need to review properly, read the previous things, or have some free time. It is still necessary to take time to deal with related things. In fact, if you think about it carefully, it is your own fault that you can't remember things. You didn't find ways to remember them when you were fiddling with them (rather than remembering them through repeated use). For example, getBoundingClientRect means "get the bounds of the client rectangle", or use evil notation to remember "cut (g) force (b) fuck (c) soft (r)". The dispatchEvent method uses "3 steps", "create (createEvent) - initial (init*Event) - dispatch (dispatchEvent)".

The pace of learning cannot stop. Those "perverts" who stand to the end also have things they don't know. Obviously, we juniors, especially our younger selves, don't know even more. Who hasn't been more or less confused when they were young, asking themselves "where is the road?" and "which direction should I go?" No matter what you choose, the pace of learning cannot stop. If you persevere, the path will become clear and you will know where to go next. Just be timid and muddle along, youth is your capital, move forward without hesitation.

I am on the current path based on interest. It is purely interest learning (I like these things and I want to learn them), not professional learning (I will learn whatever is needed to do front-end work). During these years of work, my self-immersion in technology and products has unknowingly limited my vision. Fortunately, realizing the existence of the problem has actually solved half of the problem. The reason why I say this here is to remind myself that I must not overdo it. Learning about technology and products is still important. I just need to look up more and look at the world outside the office (not the superficial understanding gained by browsing Weibo).

I came across the "wheel event" by chance yesterday. I used the mouse wheel event when I was tossing about "custom scroll bars" before. However, this is based on the mousewheel event that MooTools is already compatible with. If you want to tell me, The implementation mechanism, browser compatibility differences, etc., I was dumbfounded. There is no end to learning, so check it out, practice it, and sort it out.

2. Complete list of compatibility differences

The compatibility differences of scroll wheel events are somewhat eclectic. It is not the previous IE8-sect and other factions, but the FireFox faction and other factions.

Browsers including IE6 use onmousewheel, while FireFox browser uses DOMMouseScroll. After my own testing, even under FireFox 19, onmousewheel is not recognized.

One of the simplest usage differences (the body scroll bar is supported by an internal div of a certain height):

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

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

console.dir(event);
});

The above output differences are shown below (IE7, IE10, Chrome, and FireFox, scroll down, win7) (You can click this page to view the table content separately):

3. Compatible wheel event methods

Know yourself and the enemy and you will be victorious. If you know the differences, you will know how to deal with them. After all, we are not writing a JS library. We only deal with the difference in scrolling direction here.

Integrate our usual event adding methods, so there is (the code below is 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);        
});

So, we can use the mousewheel event easily. For example:

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

The relevant code is implemented as follows. The following shows the core codes for smooth movement (codenamed 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();
            });
        }
    };
});

The principle is very simple, the scroll wheel changes, the index changes, That is, the final position of the list changes and the animation reaches the target position.

Then, the demo page can be simply called using seajs!

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

That’s it. For some specific details, such as the HTML part or the implementation of animation, you can go to the demo to view the code display.

However, judging from the effect, the scrolling under IE6 and IE7 browsers does not have the scroll bar of the hold page. The same is true for many other attempts. I hope that colleagues with relevant experience can give guidance and optimize the scrolling under IE7/IE7 browsers. Experience the effect.

Originally, I wanted to add a demo of a custom scroll bar. When I looked at the time, I checked and saw that it was already 1:11:11. What an unlucky number. I checked the Programmer’s Fortune Perpetual Calendar. , today is not a good time to write a demo. So, epilogue to sleep.

Recommended tutorial: "JS Basic Tutorial"

The above is the detailed content of Understanding JS wheel events (mousewheel/DOMMouseScroll). For more information, please follow other related articles on the PHP Chinese website!