scroll

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

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
# handler-onscroll

Compatibilidad del Navegador

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support