files/es/web/api/globaleventhandlers/onscroll/index.html


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

---
title: GlobalEventHandlers.onscroll
slug: Web/API/GlobalEventHandlers/onscroll
translation_of: Web/API/GlobalEventHandlers/onscroll
---
<div>{{ApiRef("HTML DOM")}}</div>

<p>Un manejador de eventos para desplazamiento en <code>element</code>.</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="syntaxbox">element.onscroll = <var>functionReference</var>
</pre>

<h3 id="Parámetros">Parámetros</h3>

<p><code>functionReference</code> es una referencia a una función para ser ejecutada cuando  <code>element</code> es desplazado (enrollado).</p>

<h2 id="Example">Example</h2>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;style&gt;
  #container {
    position: absolute;
    height: auto;
    top: 0;
    bottom: 0;
    width: auto;
    left: 0;
    right: 0;
    overflow: auto;
  }

  #foo {
    height:1000px;
    width:1000px;
    background-color: #777;
    display: block;
  }

  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container"&gt;
      &lt;div id="foo"&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;script type="text/javascript"&gt;
      document.getElementById('container').onscroll = function() {
        console.log("scrolling");
      };
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<h2 id="Notas">Notas</h2>

<p>El evento es generado cuando el usuario realiza desplazamiento (scrolls) sobre el contenido de un elemento. <code>Element.onscroll</code> es equivalente a <code>element.addEventListener("scroll" ... )</code>.</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Observaciones</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}</td>
   <td>{{Spec2("DOM3 Events")}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>