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

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.