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 with JavaScript enabled. Enable JavaScript to view data.