scroll

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

El evento scroll es lanzado 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 en burbujas a la vista default cuando son lanzadas en el documento
Cancelable
No
Objetivo
defaultView, Document, Element
Acción por defecto
Ninguna
 

Properties

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not
cancelable Read only Boolean Whether the event is cancellable or not?
view Read only WindowProxy document.defaultView (window of the document)
detail Read only long (float) 0.

Ejemplo

Ya que los eventos scroll pueden lanzar a un rango alto, 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) {
  // do something with the scroll position
}

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

EniOS UIWebViews, los eventos scroll no son lanzados mientras el escroleo/deslizamiento se lleva a cabo; solo son lanzados 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: Thargelion
 Última actualización por: Thargelion,