Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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
 

Propiedades

Propiedad Tipo Descripción
target Read only EventTarget El objetivo del evento (el elemento más superior en el árbol DOM).
type Read only DOMString El tipo de evento.
bubbles Read only Boolean Si el elemento normalmente es burbuja o no
cancelable Read only Boolean Si el elemento es cancelable o no
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: 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 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.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: DeipMartin, Thargelion
 Última actualización por: DeipMartin,