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).
<div>Escálame con la rueda de tu ratón.</div>
body {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
div {
width: 105px;
height: 105px;
background: #cdf;
padding: 5px;
}
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():
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