Scrollend, un nuevo evento de JavaScript

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

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.

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 sea más como un evento de pausa del desplazamiento, no un evento de finalización del desplazamiento.

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

document.onscrollend = event => {…}

Eso es lo bueno. Deben estar perfectamente sincronizadas y llenas de condiciones significativas antes de emitirse.

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ó la barra 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 posicional de desplazamiento (no se produjo ninguna traducción). - scrollTo() no generó ninguna traducción.

Una razón por la que este evento tardó tanto en llegar a la plataforma web era la gran cantidad de pequeños detalles que necesitaban detalles de especificación. Una de las áreas más complejas era articular los detalles de scrollend para la vista del puerto visual 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 necesariamente se desplaza por el 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
});

También puedes usar 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 finalización de desplazamiento actual (si tienes una) y, al comienzo, verifica 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 para hacer 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 del navegador si está disponible. Si no está disponible, la secuencia de comandos observa los eventos del puntero y se desplaza para realizar la mejor estimación posible del evento que finaliza.

Casos de uso

Se recomienda evitar el trabajo pesado de procesamiento durante el desplazamiento. 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.

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