Table des matières
Le Tutoriel de Javascript WheelEvent
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
WheelEvent est une interface représentant les événements qui surviennent lorsqu’un utilisateur déplace la molette de la souris (mouse wheel) ou un équipement similaire.
Les navigateurs qui soutiennent WheelEvent :
WheelEvent s'agit la sous interface de MouseEvent. Elle va hériter toutes les propriétés (property) et les méthodes de l'interface mère.
| Evénement | Description |
|---|---|
| wheel | L'événement se produit lorsque la molette de la souris (mouse wheel) roule vers le haut ou vers le bas sur un élément. |
Les propriétés (property) de WheelEvent :
| Propriété | Description |
|---|---|
| deltaX | Renvoie la quantité de défilement horizontal d’une molette de souris (mouse wheel) (axe des X) |
| deltaY | Renvoie la quantité de défilement vertical d’une molette de souris (mouse wheel) (Trục Y) |
| deltaZ | Retourne la quantité de défilement d’une molette de souris pour l’axe Z. |
| deltaMode | TRenvoie un nombre qui représente l'unité de mesure des valeurs delta (DOM_DELTA_PIXEL, DOM_DELTA_PIXEL, DOM_DELTA_PAGE) |
Des constantes :
| Constantes | Valeur | Description |
| DOM_DELTA_PIXEL | 0 | L'unité de mesure du delta est pixels. |
| DOM_DELTA_LINE | 1 | L'unité de mesure du delta est lines. |
| DOM_DELTA_PAGE | 2 | L'unité de mesure du delta est pages. |
Exemple avec WheelEvent :
wheelevents-example.html
<!DOCTYPE html>
<html>
<head>
<title>WheelEvent Example</title>
<script src="wheelevents-example.js"></script>
</head>
<body>
<h3>WheelEvent example</h3>
<div style="font-size:12px; padding:5px; border:1px solid #ccc;"
onwheel="wheelHandler(event)">
Hello Everyone!
<div>
</body>
</html>
wheelevents-example.js
function wheelHandler(evt) {
var fontSize = evt.target.style.fontSize;// 12px, 13px,...
var value = Number(fontSize.substr(0, fontSize.length-2)); // 12, 13,..
// Scrolling up
if (evt.deltaY < 0) {
if(value < 50) {
value++;
}
}
// Scrolling down
if(evt.deltaY > 0) {
if(value > 5) {
value--;
}
}
evt.target.style.fontSize = value+"px";
}
