Scrollend, un nuevo evento de JavaScript

Borra tus funciones de tiempo de espera y elimina sus errores. Este es el evento que realmente necesitas: scrollend.

Adam Argyle

Antes del evento scrollend, no había una forma confiable de detectar que se había completado un desplazamiento. Esto significaba que los eventos se activaban tarde o mientras el dedo del usuario aún estaba en la pantalla. Esta falta de confiabilidad para saber cuándo finalizó el desplazamiento generó errores y una experiencia deficiente para el usuario.

Antes

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Lo mejor que puede hacer esta estrategia de setTimeout() es saber si el desplazamiento se detuvo para 100ms. Esto hace que se parezca más a un evento de desplazamiento en pausa, no a un evento de desplazamiento finalizado.

Después del evento scrollend, el navegador realiza toda esta evaluación difícil por ti.

Después

document.onscrollend = event => {…}

Eso es lo bueno. Se emiten en el momento perfecto y están llenos de condiciones significativas antes de emitirse.

Browser Support

• 114
• 114
• 109
• 26.2

Source

Pruébalo

Detalles del evento

El evento scrollend se activa cuando ocurre lo siguiente: - El navegador ya no anima ni traduce el desplazamiento. - Se soltó el toque del usuario. - El puntero del usuario soltó el pulgar de desplazamiento. - Se soltó la tecla que presionó el usuario. - Se completó el desplazamiento al fragmento. - Se completó el ajuste de desplazamiento. - Se completó scrollTo(). - El usuario se desplazó por el viewport visual.

El evento scrollend no se activa en los siguientes casos: - El gesto de un usuario no generó ningún cambio de posición de desplazamiento (no se produjo ninguna traducción). - scrollTo() no generó ninguna traducción.

Una de las razones por las que este evento tardó tanto en llegar a la plataforma web se debió a los muchos detalles pequeños que necesitaban detalles de especificación. Una de las áreas más complejas fue articular los detalles de scrollend para el viewport visual en comparación con el documento. Considera una página web en la que acercas la imagen. Puedes desplazarte cuando estás en este estado de zoom, y no necesariamente se desplaza el documento. Ten la seguridad de que incluso esta interacción de desplazamiento impulsada por el usuario en el viewport visual emitirá el evento scrollend una vez que se complete.

Usa el evento

Al igual que con otros eventos de desplazamiento, puedes registrar objetos de escucha de varias maneras.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

o bien usa la propiedad del evento:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Polyfills y mejora progresiva

Si quieres usar este nuevo evento ahora, te recomendamos que sigas estos consejos. Puedes seguir usando tu estrategia actual de finalización del desplazamiento (si tienes una) y, al principio, verificar la compatibilidad con lo siguiente:

'onscrollend' in window
// true, if available

Esto informará verdadero o falso según si el navegador ofrece el evento. Con esta verificación, puedes ramificar el código:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

Ese es un buen comienzo para mejorar de forma progresiva tu evento scrollend cuando esté disponible. También puedes probar un polyfill (NPM) que creé y que hace lo mejor que puede el navegador:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

El polyfill mejorará progresivamente para usar el evento scrollend integrado del navegador, si está disponible. Si no está disponible, la secuencia de comandos observa los eventos de puntero y el desplazamiento para realizar la mejor estimación posible del final del evento.

Casos de uso

Se recomienda evitar el trabajo de procesamiento pesado mientras se produce el desplazamiento. Esta práctica garantiza que el desplazamiento pueda usar tanta memoria y procesamiento como sea posible para mantener la experiencia fluida. Usar un evento scrollend proporciona el momento perfecto para llamar y realizar el trabajo pesado, ya que no se está produciendo el desplazamiento.

El evento scrollend se puede usar para activar varias acciones. Un caso de uso común es sincronizar los elementos de la IU asociados con la posición en la que se detuvo el desplazamiento. Por ejemplo: - Sincronizar la posición de desplazamiento de un carrusel con un indicador de puntos - Sincronizar un elemento de la galería con sus metadatos - Recuperar datos después de que un usuario se desplaza a una pestaña nueva

Imagina una situación en la que un usuario desliza un correo electrónico para descartarlo. Después de que termine de deslizar el dedo, puedes realizar la acción según el lugar al que se desplazó.

También puedes usar este evento para sincronizar después del desplazamiento programático o del usuario, o de acciones como el análisis de registros.

Este es un buen ejemplo en el que se deben actualizar varios elementos, como flechas, puntos y enfoque, en función de la posición de desplazamiento. Mira cómo creé este carrusel en YouTube. Además, prueba la demostración en vivo.

Agradecemos a Mehdi Kazemi por su trabajo de ingeniería en este tema y a Robert Flack por su orientación sobre la API y la implementación.