We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.

Etiquetas y colaboradores del documento

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