scroll

El evento scroll es lanzado 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 en burbujas a la vista default cuando son lanzadas en el documento
Cancelable: No
Objetivo: defaultView, Document, Element
Acción por defecto: Ninguna

Properties

Property	Type	Description
`target` Read only	`EventTarget`	The event target (the topmost target in the DOM tree).
`type` Read only	`DOMString`	The type of event.
`bubbles` Read only	`Boolean`	Whether the event normally bubbles or not
`cancelable` Read only	`Boolean`	Whether the event is cancellable or not?
`view` Read only	`WindowProxy`	`document.defaultView` (`window` of the document)
`detail` Read only	`long` (`float`)	0.

Ejemplo

Ya que los eventos scroll pueden lanzar a un rango alto, 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: https://www.html5rocks.com/en/tutorials/speed/animations/

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
  // do something with the scroll position
}

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

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