The event of scrolling the page on the pulley is encountered in web page special effects, but the implementation method is different under different browsers. The following method I implemented is compatible with common browsers.
function getData(event){ var e = event || window.event; //Get the scroll distance (FF each scroll data is 3 or -3, others are 120 or -120) var data = e.detail || e.wheelDelta; alert(data); } //Binding event method outside IE if(document.addEventListener && !document.attachEvent) { document.addEventListener('mousewheel',getData); //FF binds scroll event document.addEventListener('DOMMouseScroll',getData); } //IE else if(document.attachEvent && !document.addEventListener){ document.attachEvent('onmousewheel',getData); }else{ window.onmousewheel = getData; }What's worth noting in the code:
1 Why use document.addEventListener && !document.attachEvent to distinguish IE?
attachEvent and detachEvent are IE-specific methods for binding events and unbinding events, and this method exists only in IE. However, in IE9+ browsers, a more general addEventListener method is implemented to bind events. If the document.addEventListener method in the browser can exclude those that are not IE8 and below, but include IE9+ browsers, so use &&!document.attachEvent to exclude IE9+ browsers later.
2 It is worth noting that there is no mousewheel event in the FF browser, and the time when the scrolling is triggered is DOMMouseScroll.
3 Another thing worth noting is that when using addEventListener to bind events, no on is added before the event name, but when using attachEvent to bind events in IE, on is required.