Table des matières
Le Tutoriel de Javascript WheelEvent
View more Tutorials:
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";
}
