El Atributo ONMOUSEWHEEL

Detecta el movimiento de la rueda del mouse sobre un elemento.

El atributo onmousewheel detecta el movimiento de la rueda del mouse sobre un elemento. Útil para:

  • Controles de zoom personalizados

  • Scroll horizontal

  • Ajuste de parámetros numéricos

  • Efectos visuales interactivos

Sintaxis Básica

<elemento onmousewheel="funcion(event)">

  • event.deltaY: Fuerza y dirección del desplazamiento (positivo = abajo, negativo = arriba)

  • event.preventDefault(): Cancela el scroll predeterminado.

Ejemplos Detallados

Ejemplo 1: Sistema de Zoom

function manejarZoom(e) {
    e.preventDefault();
    nivelZoom += e.deltaY * -0.002; // Invertir dirección
    element.style.transform = `scale(${nivelZoom})`;
}

Uso: Scroll hacia arriba aumenta el zoom, hacia abajo lo reduce.

Ejemplo 2: Scroll Horizontal

e.target.scrollLeft += e.deltaY * 4; // Convertir desplazamiento vertical a horizontal

Truco: Multiplicar deltaY para ajustar velocidad.

Ejemplo 3: Efecto 3D

element.style.transform = `
    perspective(1000px)
    rotateX(${rotacionX}deg)
    rotateY(${rotacionY}deg)
`;

Efecto: Movimientos de rueda en X/Y rotan el elemento en 3D

Ejemplo 4: Control de Velocidad

velocidad = Math.min(Math.max(0.5, velocidad), 5); // Limitar valores

Buena práctica: Limitar rangos para evitar valores extremos.

Buenas Prácticas

Optimiza el rendimiento:

requestAnimationFrame(() => {
    // Animaciones complejas aquí
});

Combina con CSS:

transition: transform 0.3s; /* Animación suave */

Accesibilidad:

  • Proporciona controles alternativos (botones +/-)

  • Usa aria-live para actualizaciones dinámicas

Compatibilidad y Alternativas

Navegadores modernos: Chrome, Edge, Safari

Firefox: Requiere DOMMouseScroll (obsoleto) o el evento estándar wheel

Alternativa recomendada:

elemento.addEventListener('wheel', funcion);

Conclusión

El onmousewheel permite crear interacciones avanzadas, pero considera:

  • Usar el evento estándar wheel para mejor compatibilidad
  • Optimizar el rendimiento en animaciones complejas
  • Proporcionar alternativas para móviles y accesibilidad

¡Experimenta creando controles personalizados y efectos innovadores!

Nota importante: Para producción, considera usar el evento estándar wheel con addEventListener para mejor compatibilidad entre navegadores.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tutorial: Uso del atributo "onmousewheel" en HTML</title>
    <style>
        .demo-area {
            width: 400px;
            height: 200px;
            border: 2px solid #3498db;
            margin: 20px;
            padding: 20px;
            overflow: hidden;
        }
        #zoom-container {
            text-align: center;
            transition: transform 0.3s;
        }
        .scroll-container {
            display: flex;
            overflow-x: hidden;
            gap: 20px;
        }
        .carta-3d {
            width: 100px;
            height: 100px;
            background: #e74c3c;
            transition: transform 0.5s;
        }
        .rotating-box {
            width: 100px;
            height: 100px;
            background: #2ecc71;
            margin: 20px;
            transform-origin: center;
        }
    </style>
</head>
<body>
    <h1>Tutorial del atributo <code>onmousewheel</code></h1>

    <!-- Ejemplo 1: Zoom interactivo -->
    <h2>1. Control de zoom</h2>
    <div class="demo-area" onmousewheel="manejarZoom(event)">
        <div id="zoom-container">
            <img src="https://via.placeholder.com/300x150" alt="Imagen zoom">
            <p id="zoom-level">Zoom: 100%</p>
        </div>
    </div>

    <!-- Ejemplo 2: Desplazamiento horizontal -->
    <h2>2. Scroll horizontal personalizado</h2>
    <div class="demo-area scroll-container" onmousewheel="scrollHorizontal(event)">
        <div class="item">➡️ Item 1</div>
        <div class="item">➡️ Item 2</div>
        <div class="item">➡️ Item 3</div>
        <div class="item">➡️ Item 4</div>
    </div>

    <!-- Ejemplo 3: Rotación 3D -->
    <h2>3. Efecto 3D con rueda</h2>
    <div class="carta-3d" 
         onmousewheel="rotar3D(event)"
         onmouseenter="this.style.transform = 'perspective(1000px)'"
    ></div>

    <!-- Ejemplo 4: Control de velocidad -->
    <h2>4. Ajuste de parámetros</h2>
    <div class="demo-area">
        <div class="rotating-box" onmousewheel="rotarCaja(event)"></div>
        <p>Velocidad de rotación: <span id="velocidad">1x</span></p>
    </div>

    <script>
        // Ejemplo 1: Sistema de zoom
        let nivelZoom = 1;
        function manejarZoom(e) {
            e.preventDefault();
            nivelZoom += e.deltaY * -0.002;
            nivelZoom = Math.min(Math.max(0.5, nivelZoom), 3);
            document.getElementById("zoom-container").style.transform = `scale(${nivelZoom})`;
            document.getElementById("zoom-level").textContent = `Zoom: ${Math.round(nivelZoom * 100)}%`;
        }

        // Ejemplo 2: Scroll horizontal
        function scrollHorizontal(e) {
            e.preventDefault();
            e.target.scrollLeft += e.deltaY * 4;
        }

        // Ejemplo 3: Rotación 3D
        let rotacionX = 0;
        let rotacionY = 0;
        function rotar3D(e) {
            e.preventDefault();
            rotacionX += e.deltaY * 0.5;
            rotacionY += e.deltaX * 0.5;
            e.target.style.transform = `
                perspective(1000px)
                rotateX(${rotacionX}deg)
                rotateY(${rotacionY}deg)
            `;
        }

        // Ejemplo 4: Control de velocidad
        let velocidad = 1;
        function rotarCaja(e) {
            e.preventDefault();
            velocidad += e.deltaY * -0.01;
            velocidad = Math.min(Math.max(0.5, velocidad), 5);
            e.target.style.transform = `rotate(${velocidad * 360}deg)`;
            document.getElementById("velocidad").textContent = `${velocidad.toFixed(1)}x`;
        }
    </script>
</body>
</html>