1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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>
|
