So behandeln Sie das Mausradereignis onmousewheel in HTML

Das Scrollrad-Ereignis unterscheidet sich geringfügig in verschiedenen Browsern. Es kann auch die Methode addEventListener verwenden, um das Mausrad-Ereignis zu binden.

Firefox verwendet DOMMouseScroll und andere Browser verwenden das Mausrad. Wenn ein Scroll-Ereignis ausgelöst wird, verwendet Firefox das Detailattribut, um die Radinformationen zu erfassen, und andere Browser verwenden WheelDelta. Ich weiß nicht, warum andere Hersteller in dieser Frage so konsequent mit Microsoft übereinstimmen. Firefox kann die Methode addEventListener verwenden, um das DomMouseScroll-Ereignis zu binden.

elem.addEventListener('DOMMouseScroll', func, false); IE und andere Mainstream-Browser können das traditionelle Ereignisbindungsmodell verwenden. Verwenden Sie jedoch nicht die proprietäre attachmentEvent-Methode des IE. Andere Mainstream-Browser erkennen die Methode von Microsoft nicht.

Das Scrollen mit dem Firefox-Mausrad nach oben beträgt -3, das Scrollen nach unten beträgt 3.

Das Scrollen mit dem IE-Mausrad nach oben beträgt 120, das Scrollen nach unten beträgt -120.

Das Scrollen mit dem Safari-Mausrad nach oben beträgt 360, nach unten scrollen ist -360

Opera-Mausrad nach oben scrollen ist 120, nach unten scrollen ist -120

Chrome-Mausrad nach oben scrollen ist 120, nach unten scrollen ist -120

Jemand hat einige Tests unter Safari durchgeführt: „Wenn Sie nur einmal scrollen, beträgt der Wert +-0,1. Wenn Sie etwas schneller scrollen (mehrmals scrollen), wird dieser Wert ebenfalls größer. Das liegt daran, dass es eine Maus gibt.“ Radbeschleunigungsfunktion unter Mac OS. Wenn Sie einmal scrollen, scrollt der Browser um 1 Pixel, und wenn Sie dreimal scrollen, scrollt der Browser um 30 Pixel.“ Gleichzeitig forschte er auch an Camino (einer auf Gecko basierenden Kernel-Engine): „Ähnlich wie Safari (+- 0,3 bis +-Infinity), obwohl es dieselbe Kernel-Engine wie Firefox verwendet, beträgt der Delta-Wert nur +.“ -2.666666 Im Inneren schwebend, unabhängig von der Scrollgeschwindigkeit

Nach meinem Test sind IE/Opera vom gleichen Typ und Sie können Radereignisse mit attachmentEvent hinzufügen

/*IE注册事件*/ 
if(document.attachEvent){ 
  document.attachEvent('onmousewheel',scrollFunc); 
}

>

Firefox verwendet addEventListener, um Radereignisse hinzuzufügen

/*Firefox注册事件*/ 
if(document.addEventListener){ 
  document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}

Safari und Chrome sind vom gleichen Typ und können mithilfe von HTML-DOM-Ereignissen hinzugefügt werden

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

Mit Ausnahme von Firefox können alle anderen HTML-DOM zum Hinzufügen von Ereignissen verwenden. Fügen Sie Ereignisse daher mit der folgenden Methode hinzu

/*注册事件*/ 
if(document.addEventListener){ 
  document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

Detail und WheelDelta

Um festzustellen, ob das Scrollrad oben oder unten ist, muss jetzt auch die Kompatibilität im Browser berücksichtigt werden Die fünf Hauptbrowser (IE, Opera, Safari, Firefox, Chrome) verwenden „Detail“, und die anderen vier Kategorien verwenden „wheelDelta“; Werte jeweils und Detail nur ±3, WheelDelta nur ±120, wobei positive Zahlen nach oben und negative Zahlen nach unten stehen.