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 activarían tarde o mientras el dedo del usuario todavía estaba en 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 setTimeout() es saber si se detuvo el desplazamiento durante 100ms Esto hace que sea como un evento en pausa, no un desplazamiento un evento finalizado.

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

document.onscrollend = event => {…}

Eso es lo bueno. Se deben programar de forma perfecta y estar repletos de condiciones significativas antes de su emisión.

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 presión de teclas del usuario. - Se completó el desplazamiento al fragmento. - Se completó el ajuste de 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 produjo 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 se articularon los detalles de scrollend para la Ventana gráfica 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 es necesario que el desplazamiento sea del documento. Ten la seguridad de que incluso este viewport visual controlado por el usuario interacción emitirá el evento scrollend una vez que se complete.

Uso del 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 desea usar este nuevo evento ahora, este es nuestro mejor consejo. Puedes continúas usando tu estrategia de finalización de desplazamiento actual (si tienes una) y, al al comienzo, verifique la compatibilidad con:

'onscrollend' in window
// true, if available

Se 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 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 navegador integrado scrollend el evento 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

Evita el trabajo pesado computacional cuando el desplazamiento suceden. Esta práctica garantiza que el desplazamiento pueda usar tanta memoria y procesamiento como sea posible para mantener la experiencia fluida. Usa un evento scrollend proporciona el momento perfecto para llamar la atención y hacer el trabajo difícil, porque el desplazamiento es deja de suceder.

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: - Sincronización de una posición de desplazamiento en el 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 como un usuario deslizando un correo electrónico. Cuando termine de deslizar el dedo, puedes realizar la acción según el lugar al que se haya desplazado.

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 flechas, puntos y enfoque, deben actualizarse 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 caso y a Robert Flack por la API y la orientación de implementación.