Herramientas HTML

Gratis Generador de snippet scrollend

Genere manejadores de evento scrollend que se disparan tras el desplazamiento completo con inercia, con comparacion debounce.

Cargando herramienta...

Qué es Generador de snippet scrollend?

El evento scrollend es un evento nativo del navegador que se dispara cuando el desplazamiento se ha completado totalmente, incluyendo desplazamiento con impulso, rebote y decaimiento de inercia. A diferencia del evento scroll que se dispara continuamente durante el desplazamiento, o los manejadores scroll con debounce que adivinan cuándo se detuvo el desplazamiento basándose en timeouts arbitrarios, scrollend se dispara exactamente una vez cuando el gesto de desplazamiento del usuario ha terminado realmente. El evento se dispara tanto para desplazamiento programático (scrollTo, scrollBy, scrollIntoView) como para desplazamiento iniciado por el usuario mediante toque, rueda del ratón, teclado o trackpad. Baseline 2025, compatible con Chrome 114+, Edge 114+, Safari 17.5+ y Firefox 131+.

Respuesta rápida

El evento scrollend se dispara cuando el desplazamiento se ha completado totalmente incluyendo impulso, inercia y rebote. A diferencia de los manejadores scroll con debounce que adivinan el final del desplazamiento con timeouts arbitrarios, scrollend es una señal nativa del navegador que se dispara exactamente una vez en la posición final real de desplazamiento. Baseline 2025 (Chrome 114+, Safari 17.5+, Firefox 131+). Úselo para activación precisa de scroll infinito, actualizaciones de interfaz basadas en posición de desplazamiento e impresiones de analítica.

Last updated: 2026-06-02

Limitaciones

scrollend solo se dispara en elementos con desbordamiento desplazable real. Los elementos con overflow:scroll pero sin contenido que exceda sus dimensiones nunca dispararán scrollend. Verifique siempre que el elemento tenga contenido desplazable antes de confiar en el evento.
scrollend no se dispara durante el desplazamiento continuo: solo señala finalización. Para seguimiento de desplazamiento en tiempo real durante el gesto de desplazamiento, todavía necesita el evento scroll combinado con requestAnimationFrame para actualizaciones suaves.
scrollend puede no dispararse para desplazamiento programático interrumpido: si una llamada scrollTo o scrollBy es interrumpida por otra llamada scroll antes de completarse, el scrollend pendiente puede cancelarse. Encadene acciones dependientes dentro del callback del handler scrollend en lugar de asumir que siempre se ejecutará.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

Seleccione el tipo de fragmento: listener scrollend básico con destino elemento o window, scrollend con registro de posición de desplazamiento, o una comparación lado a lado de scrollend versus scroll con debounce.
Configure el destino de desplazamiento: window (desplazamiento a nivel de documento) o un elemento específico con overflow:auto o overflow:scroll.
Personalice la acción del handler: registrar la posición final de desplazamiento, actualizar un elemento de la interfaz, cargar más contenido al final o activar una animación cuando el desplazamiento se detenga.
Copie el fragmento JavaScript generado y péguelo en su proyecto. El fragmento de comparación muestra ambos enfoques con etiquetas de tiempo para que pueda ver la diferencia en una demostración en vivo.

Para qué puedes usarla

Activar la carga de contenido de scroll infinito solo cuando el usuario se ha detenido realmente de desplazarse, evitando cargas múltiples durante el desplazamiento con impulso.
Actualizar una tabla de contenidos fija o un indicador de progreso de desplazamiento en la posición final exacta, no durante posiciones intermedias.
Disparar eventos de analítica o seguimiento de impresiones cuando el usuario termina de desplazarse a una sección, asegurando una medición precisa sin doble conteo.

Casos de uso

Ejemplos prácticos

Ejemplo

Scroll infinito con activación precisa de carga

Un feed de redes sociales usa scrollend para detectar cuando el usuario llega al final de la página y se detiene. A diferencia de un manejador scroll con debounce que puede disparar múltiples cargas durante el desplazamiento con impulso lento, scrollend se dispara una vez cuando la posición de desplazamiento se estabiliza, activando una sola carga de contenido. Esto previene llamadas API duplicadas y estados de carga fantasma.

Ejemplo

Comparación de debounce para navegación consciente del desplazamiento

Un sitio de documentación resalta la sección actual en la barra lateral basándose en la posición de desplazamiento. Usando scrollend, el resaltado se actualiza exactamente cuando el desplazamiento se detiene: el usuario ve la sección correcta resaltada inmediatamente. Con un manejador scroll con debounce de 200ms en un trackpad rápido, el resaltado a menudo parpadea durante el desplazamiento medio, saltando entre secciones antes de estabilizarse. El fragmento de comparación generado demuestra ambos comportamientos lado a lado.

Errores comunes

Asumir que scrollend se dispara en cada elemento desplazable automáticamente: scrollend solo se dispara en elementos que tienen desbordamiento desplazable real (scrollWidth mayor que clientWidth o scrollHeight mayor que clientHeight). Un elemento con overflow:scroll pero sin contenido que se desborde no disparará scrollend.
Usar scrollend donde se necesita retroalimentación continua de desplazamiento: scrollend se dispara solo cuando el desplazamiento se detiene. Para barras de progreso, efectos de paralaje u otras actualizaciones visuales que necesitan rastrear posiciones intermedias de desplazamiento, use el evento scroll regular con requestAnimationFrame para actualizaciones suaves.
Confiar en scrollend para cada caso de uso de finalización de desplazamiento: el desplazamiento programático mediante scrollBy o scrollIntoView puede no activar scrollend si el desplazamiento es interrumpido por otra llamada scroll. Encadene su acción en el handler scrollend en lugar de asumir que siempre se disparará después de un desplazamiento programático.

Verificación

Cree un div desplazable con suficiente contenido para desplazarse. Adjunte un listener scrollend que registre el valor final de scrollTop. Desplace el contenido y suelte: verifique que scrollend se dispare exactamente una vez en la posición final de reposo, no durante el gesto de desplazamiento o la fase de impulso.
Compare scrollend contra un manejador scroll con debounce (timeout de 200ms) en el mismo contenedor desplazable. Desplace rápidamente y observe que scrollend se dispara al final verdadero del desplazamiento mientras que el manejador con debounce puede dispararse múltiples veces o en posiciones ligeramente incorrectas dependiendo de la velocidad de desplazamiento.

FAQ

Preguntas sobre Generador de snippet scrollend

¿En qué se diferencia scrollend de un listener de evento scroll con debounce?

Un listener scroll con debounce se dispara después de un timeout configurable (a menudo 100-300ms) desde el último evento scroll: adivina que el desplazamiento se ha detenido. scrollend se dispara cuando el navegador sabe que el desplazamiento se ha detenido, basándose en la física real del gesto de desplazamiento: el impulso ha decaído, el rebote se ha estabilizado y el viewport está en reposo. scrollend tiene cero timeout configurable y no puede ser engañado por desplazamiento lento. En la práctica, scrollend típicamente se dispara 50-500ms más rápido que un debounce de 200ms y nunca se equivoca sobre la posición final.

¿Funciona scrollend con desplazamiento táctil e impulso de trackpad?

Sí. scrollend considera todos los tipos de entrada de desplazamiento: desplazamiento táctil con impulso, desplazamiento gestual con trackpad, clics de rueda del ratón, desplazamiento por teclado (Re Pág, Av Pág, teclas de flecha) y llamadas programáticas scrollTo/scrollBy. El evento se dispara cuando la posición de desplazamiento se ha estabilizado completamente después de cualquiera de estas entradas, incluyendo la fase de impulso de gestos táctiles y de trackpad.

¿Qué sucede si el usuario comienza a desplazarse de nuevo antes de que scrollend se dispare?

Si un nuevo gesto de desplazamiento comienza durante la fase de impulso de un gesto anterior, el evento scrollend pendiente se cancela y se programa uno nuevo para el nuevo gesto. Este es el comportamiento correcto: scrollend solo debe dispararse cuando el desplazamiento se ha detenido realmente, y un nuevo gesto significa que el desplazamiento no se ha detenido. Los manejadores scroll con debounce pueden producir falsos positivos en este escenario, disparándose entre gestos.

¿Puedo cancelar o prevenir el comportamiento predeterminado de scrollend?

No. scrollend es un evento de solo lectura que señala finalización: no tiene comportamiento predeterminado que cancelar, y llamar a preventDefault() no tiene efecto. Se dispara después de que la acción de desplazamiento está completa y el navegador se ha comprometido con la posición final de desplazamiento. Si necesita influir en el comportamiento de desplazamiento, use el evento scroll o un enfoque de pointer events.

Herramientas relacionadas