El Atributo ONWHEEL

Se dispara cuando el usuario gira la rueda del mouse sobre un elemento.

El atributo onwheel se dispara cuando el usuario gira la rueda del mouse sobre un elemento. Es ideal para crear efectos de scroll personalizados, zoom, navegación horizontal, y más.

???? Sintaxis básica

html
Copy
<!-- En HTML -->
<div onwheel="manejarRueda(event)">Desplázame con la rueda</div>

<!-- En JavaScript -->
<script>
  document.getElementById("miElemento").addEventListener("wheel", (event) => {
    // Lógica aquí
  });
</script>
 
Run HTML

???? Propiedades clave del evento

  • deltaY: Desplazamiento vertical (positivo = abajo, negativo = arriba).

  • deltaX: Desplazamiento horizontal (positivo = derecha, negativo = izquierda).

  • deltaMode: Unidad de medida (0 = píxeles, 1 = líneas, 2 = páginas).

  • ctrlKey: Booleano que indica si la tecla Ctrl está presionada.

???? Ejemplos prácticos

1. Scroll horizontal personalizado

html
Copy
<div class="contenedor-horizontal" onwheel="scrollHorizontal(event)">
  <div class="contenido-ancho">Contenido muy ancho...</div>
</div>

<script>
  function scrollHorizontal(event) {
    event.preventDefault(); // Evitar scroll vertical predeterminado
    event.currentTarget.scrollLeft += event.deltaY * 2;
  }
</script>

<style>
  .contenedor-horizontal {
    width: 500px;
    overflow-x: auto;
    white-space: nowrap;
  }
  .contenido-ancho {
    width: 2000px;
    height: 200px;
  }
</style>
 
Run HTML

2. Zoom en imagen con Ctrl + Rueda

html
Copy
<img 
  id="imagenZoom" 
  src="imagen.jpg" 
  onwheel="manejarZoom(event)"
  style="transition: transform 0.3s;"
>

<script>
  let escala = 1;
  function manejarZoom(event) {
    if (!event.ctrlKey) return; // Solo si Ctrl está presionado
    
    event.preventDefault();
    const factor = event.deltaY > 0 ? 0.9 : 1.1; // Reducir o aumentar
    escala *= factor;
    event.target.style.transform = `scale(${escala})`;
  }
</script>
 
Run HTML

???? Casos de uso avanzados

1. Carrusel de tarjetas

html
Copy
<div class="carrusel" onwheel="navegarCarrusel(event)">
  <div class="tarjeta">Tarjeta 1</div>
  <div class="tarjeta">Tarjeta 2</div>
  <div class="tarjeta">Tarjeta 3</div>
</div>

<script>
  let indice = 0;
  function navegarCarrusel(event) {
    event.preventDefault();
    const direccion = event.deltaY > 0 ? 1 : -1;
    indice = Math.max(0, Math.min(2, indice + direccion));
    document.querySelector(".carrusel").scrollTo({
      left: indice * 300,
      behavior: "smooth"
    });
  }
</script>

<style>
  .carrusel {
    display: flex;
    overflow-x: hidden;
    gap: 20px;
    width: 300px;
  }
  .tarjeta {
    flex: 0 0 280px;
    height: 200px;
    background: #f0f0f0;
  }
</style>
 
Run HTML

2. Efecto parallax controlado por rueda

html
Copy
<div class="parallax-container" onwheel="moverCapas(event)">
  <div class="capa fondo" data-velocidad="0.3"></div>
  <div class="capa medio" data-velocidad="0.7"></div>
  <div class="capa frente" data-velocidad="1.2"></div>
</div>

<script>
  let posicionY = 0;
  function moverCapas(event) {
    event.preventDefault();
    posicionY += event.deltaY * 0.5;
    
    document.querySelectorAll(".capa").forEach(capa => {
      const velocidad = capa.dataset.velocidad;
      capa.style.transform = `translateY(${posicionY * velocidad}px)`;
    });
  }
</script>

<style>
  .parallax-container {
    height: 100vh;
    overflow: hidden;
    position: relative;
  }
  .capa {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.1s;
  }
  .fondo { background: url('fondo.jpg'); }
  .medio { background: url('medio.png'); }
  .frente { background: url('frente.png'); }
</style>
 
Run HTML

⚠️ Consideraciones importantes

1. Diferencias con onscroll

Atributo Descripción
onwheel Detecta movimiento físico de la rueda
onscroll Detecta cambios en la posición del scroll (puede ser por teclado o touch)

2. Compatibilidad

Navegador Soporte
Chrome ✅ 31+
Firefox ✅ 17+
Safari ✅ 7+
Edge ✅ 12+

3. Mejores prácticas

  • Usar event.preventDefault() con moderación para no romper el comportamiento esperado.

  • Optimizar rendimiento con requestAnimationFrame:

    javascript
    Copy
    function manejarRuedaOptimizada(event) {
  event.preventDefault();
  requestAnimationFrame(() => {
    // Lógica costosa aquí
  });
}

  • Considerar dispositivos táctiles: Complementar con eventos touch.

???? Trucos útiles

1. Detectar dirección del scroll

javascript
Copy
function direccionScroll(event) {
  const direccion = event.deltaY > 0 ? "abajo" : "arriba";
  console.log(`Desplazando hacia: ${direccion}`);
}

2. Scroll suave personalizado

javascript
Copy
elemento.addEventListener("wheel", (event) => {
  event.preventDefault();
  elemento.scrollBy({
    top: event.deltaY * 0.5,
    behavior: "smooth"
  });
});

???? Conclusión

El atributo onwheel permite:

  • Crear efectos de scroll personalizados

  • Implementar navegación no tradicional (horizontal, diagonal)

  • Desarrollar interacciones creativas (zoom, rotación, parallax)

  • Mejorar la UX en aplicaciones web complejas

Ejemplo final avanzado (Editor de texto con zoom):

html
Copy
<div class="editor" onwheel="ajustarZoom(event)">
  <p>Texto editable con zoom...</p>
</div>

<script>
  let nivelZoom = 1;
  function ajustarZoom(event) {
    if (!event.ctrlKey) return;
    event.preventDefault();
    
    nivelZoom += event.deltaY * -0.01;
    nivelZoom = Math.min(Math.max(0.5, nivelZoom), 3);
    
    event.target.style.transform = `scale(${nivelZoom})`;
    event.target.style.transformOrigin = "0 0";
  }
</script>

<style>
  .editor {
    width: 600px;
    padding: 20px;
    border: 2px solid #ccc;
    transition: transform 0.2s;
  }
</style>
 
Run HTML

Con este conocimiento, podrás crear interfaces innovadoras que respondan de manera única al scroll del mouse. ¡Experimenta y sorprende a tus usuarios! ????️✨