---
title: wheel
slug: Web/API/Element/wheel_event
tags:
  - eventos
translation_of: Web/API/Element/wheel_event
---
<p>El evento "wheel" se dispara cuando la ruleta de un dispositivo (usualmente un ratón) gira. Este evento reemplaza al ahora obsoleto evento {{event("mousewheel")}}.</p>

<h2 id="Información_general">Información general</h2>

<dl>
 <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
 <dd style="margin: 0 0 0 120px;">{{domxref("WheelEvent")}}</dd>
 <dt style="float: left; text-align: right; width: 120px;">Sincronía</dt>
 <dd style="margin: 0 0 0 120px;">asíncrono</dd>
 <dt style="float: left; text-align: right; width: 120px;">Bubble</dt>
 <dd style="margin: 0 0 0 120px;">Si</dd>
 <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
 <dd style="margin: 0 0 0 120px;">Si</dd>
 <dt style="float: left; text-align: right; width: 120px;">Target</dt>
 <dd style="margin: 0 0 0 120px;">defaultView, Document, Element</dd>
 <dt style="float: left; text-align: right; width: 120px;">Acción predet.</dt>
 <dd style="margin: 0 0 0 120px;">Scroll, atras/adelante (historial), o zoom.</dd>
</dl>

<h2 id="Propiedades">Propiedades</h2>

<p><em>Este evento implementa las propiedades de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p>

<h3 id="Propiedades_de_WheelEvent">Propiedades de <code>WheelEvent</code></h3>

<p>{{page("/en-US/docs/Web/API/WheelEvent", "Properties")}}</p>

<h3 id="Propiedades_de_MouseEvent">Propiedades de <code>MouseEvent</code></h3>

<p>{{page("/en-US/docs/Web/API/MouseEvent", "Properties")}}</p>

<h3 id="Propiedades_UIEvent">Propiedades <code>UIEvent</code></h3>

<p>{{page("/en-US/docs/Web/API/UIEvent", "Properties")}}</p>

<h3 id="Propiedades_Event">Propiedades <code>Event</code></h3>

<p>{{page("/en-US/docs/Web/API/Event", "Properties")}}</p>

<h2 id="Métodos">Métodos</h2>

<p><em>Este evento implementa los métodos de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.</em></p>

<h3 id="Métodos_de_WheelEvent">Métodos de <code>WheelEvent</code></h3>

<p>{{page("/en-US/docs/Web/API/WheelEvent", "Methods")}}</p>

<h3 id="Métodos_de_MouseEvent">Métodos de <code>MouseEvent</code></h3>

<p>{{page("/en-US/docs/Web/API/MouseEvent", "Methods")}}</p>

<h3 id="Métodos_de_UIEvent">Métodos de <code>UIEvent</code></h3>

<p>{{page("/en-US/docs/Web/API/UIEvent", "Methods")}}</p>

<h3 id="Métodos_de_Event">Métodos de <code>Event</code></h3>

<p>{{page("/en-US/docs/Web/API/Event", "Methods")}}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events','DOM3-Events.html#event-type-wheel','wheel')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad">Compatibilidad</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>31</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("17.0")}}</td>
   <td>{{CompatIE("9.0")}}<sup>[1]</sup></td>
   <td>18</td>
   <td>7.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("17.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Internet Explorer solo toma el evento "wheel" mediante <code>addEventListener</code>, no se permite el atributo <code>onwheel</code> en objetos del DOM. <a href="https://connect.microsoft.com/IE/feedback/details/782835/missing-onwheel-attribute-for-the-wheel-event-although-its-supported-via-addeventlistener">Bug report.</a><br>
  </p>

<h3 id="Escuchar_al_evento_en_distintos_navegadores">Escuchar al evento en distintos navegadores</h3>

<p>En el siguiente script se crea el método multi-navegador <code>addWheelListener </code>que permite escuchar el evento wheel en diferentes navegadores a la vez que se previene el funcionamiento por defecto.</p>

<pre class="brush:js;">// crea el metodo "addWheelListener" global
// ejemplo: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window,document) {

    var prefix = "", _addEventListener, support;

    // detecta el tipo de evento permitido por el navegador
    if ( window.addEventListener ) {
        _addEventListener = "addEventListener";
    } else {
        _addEventListener = "attachEvent";
        prefix = "on";
    }

    // detecta el tipo de evento wheel manejado por el navegador
    support = "onwheel" in document.createElement("div") ? "wheel" : // Los navegadores modernos permiten "wheel"
              document.onmousewheel !== undefined ? "mousewheel" : // Webkit e IE soportan al menos "mousewheel"
              "DOMMouseScroll"; // Asumiremos que el resto de navegadores son Firefox antiguos

    window.addWheelListener = function( elem, callback, useCapture ) {
        _addWheelListener( elem, support, callback, useCapture );

        // controlaremos MozMousePixelScroll en Firefox antiguos
        if( support == "DOMMouseScroll" ) {
            _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
        }
    };

    function _addWheelListener( elem, eventName, callback, useCapture ) {
        elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
            !originalEvent &amp;&amp; ( originalEvent = window.event );

            // Creamos un objeto de evento
            var event = {
                // tomamos como referencia el objeto original
                originalEvent: originalEvent,
                target: originalEvent.target || originalEvent.srcElement,
                type: "wheel",
                deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
                deltaX: 0,
                deltaZ: 0,
                preventDefault: function() {
                    originalEvent.preventDefault ?
                        originalEvent.preventDefault() :
                        originalEvent.returnValue = false;
                }
            };

            // calculamos deltaY (y deltaX) dependiendo del evento
            if ( support == "mousewheel" ) {
                event.deltaY = - 1/40 * originalEvent.wheelDelta;
                // Webkit tambien soporta wheelDeltaX
                originalEvent.wheelDeltaX &amp;&amp; ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
            } else {
                event.deltaY = originalEvent.detail;
            }

            // Disparamos el callback
            return callback( event );

        }, useCapture || false );
    }

})(window,document);</pre>

<h2 id="Notas_para_Gecko">Notas para Gecko</h2>

<h3 id="Orden_de_los_eventos_en_eventos_antiguos">Orden de los eventos en eventos antiguos</h3>

<p>Si el evento wheel no ha sido implementado, los eventos <code>DOMMouseScroll</code> y <code>MozMousePixelScroll</code> se usarán para dar retrocompativilidad. Sus atributos se calculan dependiendo del delta del evento wheel y el padre más cercano. Si el evento wheel o alguno de los anteriores invoca<span style="line-height: 1.5;"> {{ domxref("event.preventDefault()") }}, no ocurrirá nada.</span></p>

<p>El orden de ejecución del evento es:</p>

<ol>
 <li>Eventos wheel en grupo de eventos por defecto (aplicaciones web y add-ons pueden manejar los eventos de este grupo)</li>
 <li><code>Un evento DOMMouseScroll</code> vertical en caso de que el deltaY, en consecutivas llamadas del evento se vuelva mayor que 1.0 o menor que -1.0</li>
 <li><code>Un evento MozMousePixelScroll</code> vertical en caso de que el <code>deltaY</code> del último evento <code>wheel</code> no sea igual a cero</li>
 <li><code>Un evento DOMMouseScroll</code> horizontal en caso de que el <code>deltaX</code> acumule un valor mayor que 1.0 o menor que -1.0</li>
 <li><code>Un evento MozMousePixelScroll</code> horizontal en caso de que el <code>deltaX</code> del último evento no sea igual que cero</li>
 <li>Un evento <code>wheel</code> en el grupo de sistema (Solamente add-ons pueden gestionar este grupo de eventos)</li>
</ol>

<p><br>
 <span style="font-style: inherit; line-height: 1.5;">¿Qué ocurre si</span><strong style="font-style: inherit; font-weight: 700; line-height: 1.5;"> </strong><code style="font-weight: 700; line-height: 1.5;">preventDefault()</code><strong style="font-style: inherit; font-weight: 700; line-height: 1.5;"> es llamado?</strong></p>

<table>
 <thead>
 </thead>
 <tbody>
  <tr>
   <th scope="row"><code>wheel</code> (grupo por defecto de evetos)</th>
   <td><code>Se llama preventDefault()</code></td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <th scope="row"><code>DOMMouseScroll</code> (Vertical)</th>
   <td>No se llama</td>
   <td><code>Se llama preventDefault()</code></td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <th scope="row"><code>MozMousePixelScroll</code> (Vertical)</th>
   <td>No se llama</td>
   <td><code>defaultPrevented</code> devuelve true</td>
   <td><code>Se llama preventDefault()</code></td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <th scope="row"><code>DOMMouseScroll</code> (Horizontal)</th>
   <td>No se llama</td>
   <td>No se ve afectado</td>
   <td>No se ve afectado</td>
   <td><code>Se llama preventDefault()</code></td>
   <td> </td>
  </tr>
  <tr>
   <th scope="row"><code>MozMousePixelScroll</code> (Horizontal)</th>
   <td>No se llama</td>
   <td>No se ve afectado</td>
   <td>No se ve afectado</td>
   <td><code>defaultPrevented</code> devuelve true</td>
   <td><code>Se llama preventDefault()</code></td>
  </tr>
  <tr>
   <th scope="row"><code>wheel</code> (grupo de eventos de sistema)</th>
   <td><code>defaultPrevented</code> devuelve true</td>
   <td><code>defaultPrevented</code> devuelve true</td>
   <td><code>defaultPrevented</code> devuelve true</td>
   <td><code>defaultPrevented</code> devuelve true</td>
   <td><code>defaultPrevented</code> devuelve true</td>
  </tr>
 </tbody>
</table>

<p>En caso de que un Add-on necesite conocer si uno de los eventos legacy es usado por contenidos del DOM puede usar el evento wheel de #6. Lee la documentación de <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEventListenerService" title="/en-US/docs/XPCOM_Interface_Reference/nsIEventListenerService"><code>nsIEventListenerService</code></a> para mayor detalle acerca del grupo de eventos de sistema.</p>

<p>Los valores delta y las acciones por defecto de eventos predefinidos pueden ser personalizados en las preferencias de usuario (<a href="https://wiki.mozilla.org/Gecko:Mouse_Wheel_Scrolling#Preferences_for_customizing_delta_values_and_default_action" title="/en-US/docs/HTML/Element/details">details</a>). Por lo tanto, no se debe presuponer que alguna acción en concreto va a ocurrir tras recibir este evento.</p>

<h3 id="Valores_delta">Valores delta</h3>

<p>Los valores delta no indican la cantidad de scroll actual de manera predeterminada. Si el usuario presiona alguna tecla mdificadora mientras mueve la rueda de scroll, dicha acción puede causar otra totalmente diferente a la esperada, como ir adelante o atras por el historial o hacer zoom. Además, incluso cuando la acción sea la esperada, el elemento que la recibe puede ser distinto al deseado.<br>
 El objetivo del evento wheel solo está definido por la posición del cursor en el momento que se dispara este.</p>

<h3 id="El_valor_de_deltaMode">El valor de deltaMode</h3>

<p>En Windows, los siguientes 3 eventos nativos del DOM causan eventos <code>wheel</code>.</p>

<dl>
 <dt>WM_MOUSEWHEEL (Evento wheel vertical del ratón)</dt>
 <dd>El <code>deltaMode</code> puede ser <code>DOM_DELTA_LINE</code> o <code>DOM_DELTA_PAGE</code>. Depende de las preferencias de usuario en Windows (Para configuraciones por defecto, debería ser <code>DOM_DELTA_LINE</code>).</dd>
 <dt>WM_MOUSEHWHEEL (Evento wheel horizontal del ratón)</dt>
 <dd><code>EldeltaMode</code> puede ser <code>DOM_DELTA_LINE</code> o <code>DOM_DELTA_PAGE</code>. Sin embargo, ni la configuración de velocidad de rueda de ratón de Windows ni ningún UI similar de drivers permite modificar el scroll de páginas. De modo que, normalmente este valor es <code>DOM_DELTA_LINE</code>.</dd>
 <dt>WM_GESTURE (Solo utilizado en navegación gestual)</dt>
 <dd>El <code>deltaMode</code> es siempre <code>DOM_DELTA_PIXEL</code>. Pero la mayoría de dispositivos táctiles de portatiles emulan la rueda de ratón en lugar de usar este evento. Este evento es usado típicamente en Tablet PC.</dd>
</dl>

<p>En Mac, el valor de <code>deltaMode</code> depende del dispositivo. Si el dispositivo permite alta resolución, el scroll se hará en pixels, de manera que el valor del <code>deltaMode</code> será <code>DOM_DELTA_PIXEL</code>. De todos modos, el usuario puede cambiarlo a <code>DOM_DELTA_LINE</code> con la preferencia <code>"mousewheel.enable_pixel_scrolling"</code>.  Si el dispositivo no soporta alta resolución, es siembre <code>DOM_DELTA_LINE</code>.</p>

<p>En otras plataformas, el valor de <code>deltaMode</code> es siempre <code>DOM_DELTA_LINE</code>.</p>

<h3 id="Eventos_no_confiables">Eventos no confiables</h3>

<p>Los eventos <code>wheel</code> no nativos nunca causarán acción por defecto.</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>{{ domxref("WheelEvent") }}</li>
 <li>Gecko's legacy events: <code>DOMMouseScroll</code> and <code>MozMousePixelScroll</code></li>
 <li>Non-Gecko browsers' legacy event: <code>mousewheel</code></li>
 <li>WebKit bug: <a href="https://bugs.webkit.org/show_bug.cgi?id=94081">https://bugs.webkit.org/show_bug.cgi?id=94081</a></li>
</ul>