scroll

El evento scroll se produce cuando la vista del documento o un elemento es deslizado.

Información General

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

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

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

Especificaciones

Specification
CSSOM View Module
# eventdef-document-scroll
HTML Standard
# handler-onscroll

Compatibilidad del Navegador

BCD tables only load in the browser