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