Vamos directo al grano. Seguiré la siguiente ruta de conceptos (otros le llaman flujo de aprendizaje o learning flow).
- Desde Javascript
Document: scroll event-
window.scrollBehavior -
'smooth' -
'instant' -
--- window.scroll(x,y)-
window.scrollBy(x,y) -
window.scrollByOptions(options) -
--- Element scroll event-
element.scrollIntoView(options) -
element.scrollTo(x,y) -
--- Element: scrollend event-
element.scrollBy(x,y) -
element.scrollByOptions(options) -
--- Element: scrollHeight propertyElement: scrollLeft propertyElement: scrollTop propertyElement: scrollWidth property-
--- -
window.requestAnimationFrame(callback) -
element.scrollIntoView() Element: scrollTo() method-
--- -
element.scrollTo() -
Infinite Scroll Intersection Observer API
Recordar
element es una clase que representa a cada contenido individual dentro de una página web. Y cada método y propiedad derivada de element da datos únicamente de ese elemento al que referencia.
Mientras que document es un interface que representa a cada página web mostrada por la ventana del navegador. Así mismo, cada método y propiedades da los datos de esa única página web.
Document: evento scroll
Evento que dispara una acción cuando se está deslizando la pantalla (arriba o abajo, clic o táctil). El objeto 'document' refiere a toda la página web que sirve de contexto en ese momenro de la interacción.
Document: scrollend
Evento que dispara una acción cuando el desliz se detuvo (arriba o abajo, desde clic o táctil, o desde rueda de mouse).
¡Recordar!
Si deseamos apuntar a una clase mediante document .querySelector ("clase"); entonces, ¡apuntemos bien!.
--------
Si es una clase, debe ir (".clase");
Si es un Id, debe ir ("#clase");
Todo quieto