L'événement onmousewheel du script qui s'exécute lorsque la molette de la souris défile en html5

L'événement

wheel est légèrement différent selon les navigateurs. Un navigateur comme Firefox utilise DOMMouseScroll. ff peut également utiliser la méthode addEventListener pour lier l'événement DomMouseScroll. D'autres navigateurs utilisent mousewheel pour les événements de roue. . Laissez-moi vous donner une introduction détaillée.

Firefox utilise DOMMouseScroll et d'autres navigateurs utilisent la molette de la souris. Lorsqu'un événement de défilement est déclenché, Firefox utilise l'attribut detail pour capturer les informations sur la roue, et d'autres navigateurs utilisent wheelDelta. Je ne sais pas pourquoi les autres fabricants sont si cohérents avec Microsoft sur cette question. Firefox peut utiliser la méthode addEventListener pour lier l'événement DomMouseScroll.

elem.addEventListener('DOMMouseScroll', func, false); IE et d'autres navigateurs grand public peuvent utiliser le modèle de liaison d'événement traditionnel . Mais n'utilisez pas la méthode attachEvent propriétaire d'IE. Les autres navigateurs grand public ne reconnaissent pas la méthode de Microsoft.

Le défilement de la molette de la souris Firefox vers le haut est de -3, le défilement vers le bas est de 3

Le défilement de la molette de la souris IE vers le haut est de 120, le défilement vers le bas est de -120

La molette de la souris Safari vers le haut Le défilement est 360, le défilement vers le bas est de -360

Le défilement de la molette de la souris Opera vers le haut est de 120, le défilement vers le bas est de -120

Le défilement de la molette de la souris Chrome vers le haut est de 120, le défilement vers le bas est de -120

Quelqu'un a fait quelques tests sous Safari : "Si vous faites défiler une seule fois, la valeur est de +-0,1. Si vous faites défiler un peu plus vite (faites défiler encore quelques fois), cette valeur deviendra également plus grande. C'est parce qu'il y a une souris fonction d'accélération de la roue sous Mac OS Lorsque vous faites défiler une fois, le navigateur fait défiler 1 pixel, et lorsque vous faites défiler trois fois, le navigateur fait défiler 30 pixels. Parallèlement, il a également mené des recherches sur Camino (un moteur noyau basé sur Gecko) : « Semblable à Safari (+- 0,3 à +-Infinity), bien qu'il utilise le même moteur noyau que Firefox, la valeur delta n'est que de + -2.666666 Flottant, quelle que soit la vitesse de défilement

Après mon test, IE/Opera sont du même type, et vous pouvez utiliser attachEvent pour ajouter l'événement wheel

.

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

Firefox. addEventListener ajoute des événements avec molette de défilement

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

Safari et Chrome sont du même type, et les événements peuvent être ajoutés à l'aide du HTML DOM

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

Sauf Firefox, tous les autres peuvent utiliser HTML DOM pour ajouter des événements, alors ajoutez des événements en utilisant la méthode suivante

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!