scroll
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 |