scroll

El evento scroll se ejecuta cuando la vista del documento o un elemento es deslizado (escroleado).

Información General

Especificación: DOM L3, CSSOM View
Interfaz: UIEvent
Bubbles: No en elementos, pero burbujea a la vista default cuando se ejecuta en el documento
Cancelable: No
Objetivo: defaultView, Document, Element
Acción por defecto: Ninguna

Propiedades

Property	Type	Description
`target` Read only	`EventTarget`	El objetivo de evento (el objetivo superior en el árbol DOM).
`type` Read only	`DOMString`	El tipo de evento.
`bubbles` Read only	`Boolean`	Si el evento burbujea o no.
`cancelable` Read only	`Boolean`	Si el evento puede ser cancelado o no.
`view` Read only	`WindowProxy`	`document.defaultView` (`window` de el documento)
`detail` Read only	`long` (`float`)	0.

Ejemplo

Dado que los eventos scroll pueden ejecutarse a un ritmo elevado, el event handler no debería ejecutar operaciones computacionalmente costosas como modificaciones en el DOM. En cambio, se recomienda acelerar el evento utilizando requestAnimationFrame, setTimeout or customEvent, de este modo:

Optimización de Scroll con window.requestAnimationFrame

// 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;
});

Más ejemplos se pueden ver en el evento resize.

Compatibilidad en navegadores

iOS UIWebView

En iOS UIWebViews, los eventos scroll no se ejecutan mientras el escroleo/deslizamiento se lleva a cabo; solo son ejecutados cuando el deslizamiento terminó. Ver Bootstrap issue #16202. Safari y WKWebViews no se ven afectados por este bug.