fix #3994 Event: wheel. update and md [es] (#4504)

2 files changed, 106 insertions, 200 deletions

diff --git a/files/es/web/api/element/wheel_event/index.html b/files/es/web/api/element/wheel_event/index.html
deleted file mode 100644
index 1e2d01631d..0000000000
--- a/files/es/web/api/element/wheel_event/index.html
+++ /dev/null
@@ -1,200 +0,0 @@
----
-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>
-
-{{Compat("api.Element.wheel_event")}}
-
-<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>
diff --git a/files/es/web/api/element/wheel_event/index.md b/files/es/web/api/element/wheel_event/index.md
new file mode 100644
index 0000000000..cc74d12c37
--- /dev/null
+++ b/files/es/web/api/element/wheel_event/index.md
@@ -0,0 +1,106 @@
+---
+title: 'Element: wheel event'
+slug: Web/API/Element/wheel_event
+translation_of: Web/API/Element/wheel_event
+original_slug: Web/API/Element/wheel_event
+browser-compat: api.Element.wheel_event
+---
+{{APIRef}}
+
+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 {{domxref("Element/mousewheel_event", "mousewheel")}}.
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th>Burbujas</th>
+      <td>Sí</td>
+    </tr>
+    <tr>
+      <th>Cancelable</th>
+      <td>Sí</td>
+    </tr>
+    <tr>
+      <th>Interfaz</th>
+      <td>{{domxref("WheelEvent")}}</td>
+    </tr>
+    <tr>
+      <th>Propiedades del manejador de eventos</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onwheel", "onwheel")}}
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+> **Nota:** No confundir el evento `wheel` con el evento {{domxref("Element/scroll_event", "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 {{domxref("Element.scrollLeft", "scrollLeft")}} y {{domxref("Element.scrollTop", "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).
+
+```html
+<div>Escálame con la rueda de tu ratón.</div>
+```
+
+```css
+body {
+  min-height: 100vh;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+div {
+  width: 105px;
+  height: 105px;
+  background: #cdf;
+  padding: 5px;
+}
+```
+
+```js
+function zoom(event) {
+  event.preventDefault();
+
+  scale += event.deltaY * -0.01;
+
+  // Restricción de escala
+  scale = Math.min(Math.max(.125, scale), 4);
+
+  // Aplicar transformación de escala
+  el.style.transform = `scale(${scale})`;
+}
+
+let scale = 1;
+const el = document.querySelector('div');
+el.onwheel = zoom;
+```
+
+{{EmbedLiveSample("Scaling_an_element_via_the_wheel", 700, 300)}}
+
+### Equivalente en addEventListener
+
+El manejador de eventos también se puede configurar mediante el método {{domxref("EventTarget/addEventListener", "addEventListener()")}}:
+
+```js
+el.addEventListener('wheel', zoom);
+```
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad con navegadores
+
+{{Compat}}
+
+## Véase también
+
+- {{domxref("WheelEvent")}}
+- [Document: `wheel` event](/es/docs/Web/API/Document/wheel_event)
+