scroll
El evento scroll
se produce cuando la vista del documento o un elemento es deslizado.
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.