aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/document/scroll_event/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/es/web/api/document/scroll_event/index.html')
-rw-r--r--files/es/web/api/document/scroll_event/index.html104
1 files changed, 104 insertions, 0 deletions
diff --git a/files/es/web/api/document/scroll_event/index.html b/files/es/web/api/document/scroll_event/index.html
new file mode 100644
index 0000000000..944d539834
--- /dev/null
+++ b/files/es/web/api/document/scroll_event/index.html
@@ -0,0 +1,104 @@
+---
+title: scroll
+slug: Web/API/Document/scroll_event
+translation_of: Web/API/Document/scroll_event
+---
+<p>El evento <strong><code>scroll</code></strong> se produce cuando la vista del documento o un elemento es deslizado.</p>
+
+<h2 id="Información_General">Información General</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#scrolling-0">CSSOM View</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No en elementos, pero burbujea a la vista default cuando se ejecuta en el documento</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView, Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Acción por defecto</dt>
+ <dd style="margin: 0 0 0 120px;">Ninguna</dd>
+ <dt style="margin: 0px 0px 0px 120px;"></dt>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Property</th>
+ <th scope="col">Type</th>
+ <th scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>target</code> {{readonlyInline}}</td>
+ <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+ <td>El objetivo de evento (el objetivo superior en el árbol DOM).</td>
+ </tr>
+ <tr>
+ <td><code>type</code> {{readonlyInline}}</td>
+ <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+ <td>El tipo de evento.</td>
+ </tr>
+ <tr>
+ <td><code>bubbles</code> {{readonlyInline}}</td>
+ <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+ <td>Si el evento burbujea o no.</td>
+ </tr>
+ <tr>
+ <td><code>cancelable</code> {{readonlyInline}}</td>
+ <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+ <td>Si el evento puede ser cancelado o no.</td>
+ </tr>
+ <tr>
+ <td><code>view</code> {{readonlyInline}}</td>
+ <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+ <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> de el documento)</td>
+ </tr>
+ <tr>
+ <td><code>detail</code> {{readonlyInline}}</td>
+ <td><code>long</code> (<code>float</code>)</td>
+ <td>0.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Dado que los eventos <code>scroll</code> pueden ejecutarse a un ritmo elevado, el <em>event handler</em> no debería ejecutar operaciones computacionalmente costosas como modificaciones en el DOM. En cambio, se recomienda acelerar el evento utilizando <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a>, <a href="/en-US/docs/Web/API/WindowTimers/setTimeout">setTimeout</a> or <a href="/en-US/docs/Web/API/CustomEvent">customEvent</a>, de este modo:</p>
+
+<h4 id="Optimización_de_Scroll_con_window.requestAnimationFrame">Optimización de Scroll con window.requestAnimationFrame</h4>
+
+<pre class="brush: js">// Referencia: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+var last_known_scroll_position = 0;
+var ticking = false;
+
+function doSomething(scroll_pos) {
+ // Hacer algo con la posición del scroll
+}
+
+window.addEventListener('scroll', function(e) {
+ last_known_scroll_position = window.scrollY;
+ if (!ticking) {
+ window.requestAnimationFrame(function() {
+ doSomething(last_known_scroll_position);
+ ticking = false;
+ });
+ }
+ ticking = true;
+});</pre>
+
+
+
+<p>Más ejemplos se pueden ver en el evento <a href="/en-US/docs/Web/Events/resize#Example">resize</a>.</p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<h3 id="iOS_UIWebView">iOS UIWebView</h3>
+
+<p>En iOS UIWebViews, los eventos <code>scroll</code> no se ejecutan mientras el <em>escroleo/deslizamiento</em> se lleva a cabo; solo son ejecutados cuando el deslizamiento terminó. Ver <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>. Safari y WKWebViews no se ven afectados por este bug.</p>