Element: wheel event

El evento wheel se activa cuando el usuario gira un botón de rueda en un dispositivo señalador (normalmente un ratón).

Este evento reemplaza el evento obsoleto no estándar mousewheel.

Propiedades

Burbujas Sí
Cancelable Sí
Interfaz WheelEvent
Propiedades del manejador de eventos onwheel

Nota: No confundir el evento wheel con el evento scroll. La acción predeterminada de un evento wheel es específica de la implementación y no necesariamente envía un evento scroll. Incluso cuando lo hace, los valores delta* en el evento wheel no reflejan necesariamente la dirección de desplazamiento del contenido. Por lo tanto, no confíe en las propiedades delta* del evento wheel para obtener la dirección de desplazamiento. En su lugar, detecte los cambios de valor de scrollLeft y scrollTop del objetivo en el evento scroll.

Ejemplos

Escalar un elemento a través de la rueda

Este ejemplo muestra cómo escalar un elemento usando la rueda del mouse (u otro dispositivo señalador).

html
<div>Escálame con la rueda de tu ratón.</div>
css
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}
js
function zoom(event) {
  event.preventDefault();

  scale += event.deltaY * -0.01;

  // Restricción de escala
  scale = Math.min(Math.max(0.125, scale), 4);

  // Aplicar transformación de escala
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector("div");
el.onwheel = zoom;

Equivalente en addEventListener

El manejador de eventos también se puede configurar mediante el método addEventListener():

js
el.addEventListener("wheel", zoom);

Especificaciones

Specification
UI Events
# event-type-wheel
HTML Standard
# handler-onwheel

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también