---
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>