Scrollend, un nuevo evento de JavaScript

Borra tus funciones de tiempo de espera y quítales los 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 sobre 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 se detuvo el desplazamiento para 100ms. Esto hace que se parezca más a un evento de pausa del desplazamiento, no a un evento de finalización del desplazamiento.

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

Después

document.onscrollend = event => {…}

Eso es lo bueno. Tiene el tiempo perfecto y está repleto de condiciones significativas antes de su emisión.

Navegadores compatibles

• 114
• 114
• 109
• x

Origen

Pruébalo

Detalles del evento

El evento scrollend se activa en los siguientes casos: - El navegador ya no anima ni traduce el desplazamiento. - Se liberó el toque del usuario. - El puntero del usuario liberó el botón de desplazamiento. - Se liberó la pulsación de tecla del usuario. - Se completó el desplazamiento al fragmento. - Se completó el ajuste del desplazamiento. - Se completó scrollTo(). - El usuario desplazó 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.

Uno de los motivos por los 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 Visual Viewport en comparación con el documento. Piensa en una página web en la que acercas la imagen. Puedes desplazarte cuando estás en este estado de zoom, y no es necesario que el desplazamiento sea del documento. Ten la seguridad de que incluso esta interacción de desplazamiento visual impulsada por el usuario 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 usa la propiedad del evento:

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

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

Compatibilidad con versiones anteriores y mejora progresiva

Si quieres usar este nuevo evento ahora, este es nuestro mejor consejo. Puedes seguir usando tu estrategia de fin de desplazamiento actual (si tienes una) y, al principio, verificar la compatibilidad con lo siguiente:

'onscrollend' in window
// true, if available

Se informará verdadero o falso según si el navegador ofrece el evento. Con esta verificación, puedes bifurcar 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 progresivamente tu evento scrollend cuando esté disponible. También puedes probar un polyfill (NPM) que hice 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 se mejorará de forma progresiva para usar el evento scrollend integrado en el navegador si está disponible. Si no está disponible, la secuencia de comandos observa los eventos del puntero y se desplaza para hacer la mejor estimación posible del final del evento.

Casos de uso

Es una práctica recomendada evitar el trabajo intensivo de procesamiento mientras se desplaza el contenido. Esta práctica garantiza que el desplazamiento pueda usar tanta memoria y procesamiento como sea posible para mantener la experiencia fluida. El uso de un evento scrollend proporciona el momento perfecto para llamar y hacer el trabajo pesado, ya que el desplazamiento ya no se produce.

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: - Sincroniza la posición de desplazamiento de un carrusel con un indicador de punto. - 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. 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 acciones como el registro de estadísticas.

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

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