Element : évènement wheel

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Vous voulez une meilleure prise en charge pour cette fonctionnalité ? Dites-nous pourquoi.

En savoir plus
Voir la compatibilité complète

L'évènement wheel est déclenché lorsque l'utilisateur·ice fait tourner un bouton de molette sur un périphérique de pointage (généralement une souris). Il est également déclenché pour les périphériques associés qui simulent les actions d'une molette, comme les pavés tactiles et les boules de commande.

Cet évènement remplace l'évènement mousewheel non standard et obsolète.

Ne confondez pas l'évènement wheel avec l'évènement scroll :

Un évènement wheel ne déclenche pas nécessairement d'évènement scroll. Par exemple, l'élément peut ne pas être défilable. Les actions de zoom effectuées avec la molette ou le pavé tactile déclenchent également des évènements wheel (avec ctrlKey défini sur true).
Un évènement scroll n'est pas nécessairement déclenché par un évènement wheel. Les éléments peuvent également défiler avec le clavier, en faisant glisser une barre de défilement ou avec JavaScript.
Même lorsque l'évènement wheel déclenche un défilement, les valeurs delta* de l'évènement wheel ne reflètent pas nécessairement le sens de défilement du contenu.

Par conséquent, ne vous appuyez pas sur les propriétés delta* de l'évènement wheel pour obtenir le sens de défilement. Détectez plutôt les changements de valeur de scrollLeft et de scrollTop de la cible dans l'évènement scroll.

L'évènement wheel peut être annulé. Dans certains navigateurs, seul le premier évènement wheel d'une séquence peut être annulé, et les évènements suivants ne peuvent pas l'être. Si l'évènement est annulé, aucun défilement ni zoom n'est effectué. Cela peut entraîner des problèmes de performances, car le navigateur doit attendre le traitement de chaque évènement de molette avant de faire réellement défiler le contenu. Vous pouvez éviter cela en définissant passive: true lors de l'appel à addEventListener(), ce qui peut amener le navigateur à produire des évènements wheel qui ne peuvent pas être annulés.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènements.

addEventListener("wheel", (event) => { })

onwheel = (event) => { }

<div>Mettez-moi à l'échelle avec la molette de votre souris.</div>

css

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 105px;
  height: 105px;
  background: #ccddff;
  padding: 5px;
}

let echelle = 1;
const el = document.querySelector("div");

function zoom(event) {
  event.preventDefault();

  echelle += event.deltaY * -0.01;

  // Limite l'échelle
  echelle = Math.min(Math.max(0.125, echelle), 4);

  // Applique la transformation d'échelle
  el.style.transform = `scale(${echelle})`;
}

el.onwheel = zoom;

Équivalent de `addEventListener`

Le gestionnaire d'évènements peut également être configuré au moyen de la méthode addEventListener() :

el.addEventListener("wheel", zoom, { passive: false });

Spécifications

Spécification
Pointer Events # wheel
HTML # handler-onwheel

Compatibilité des navigateurs

Voir aussi

L'interface WheelEvent

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 11 août 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu