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 un desplazamiento de que se completó. 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 en cuanto a saber cuándo el desplazamiento tiene realmente finalizó, provocó errores y una mala experiencia 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 finalizado.

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

document.onscrollend = event => {…}

Eso es bueno. Perfectamente cronometrada y repleta de condiciones significativas. antes de realizar la emisión.

Pruébalo

Detalles del evento

El evento scrollend se activa en los siguientes casos: - El navegador ya no está animando ni traduciendo el desplazamiento. - Se liberó el toque del usuario. - El puntero del usuario liberó la barra 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 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 posicional de desplazamiento (no se produjo ninguna traducción). - scrollTo() no produjo ninguna traducción.

Una razón por la cual este evento tardó tanto en llegar a la plataforma web fue la gran cantidad de que requerían detalles de las especificaciones. 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 a la que te acerques. Puedes desplazarte cuando se encuentra en este estado de acercamiento y no necesariamente debe desplazarse por la . 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 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
};

Polyfills y la 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

Esto indicará verdadero o falso, dependiendo de 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 comienzo saludable para mejorar de forma progresiva tu evento scrollend cuando está disponible. También puedes probar con un polyfill (NPM) que hice que es lo mejor el navegador puede:

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 desplazarse para hacer la mejor estimación posible de la finalización del evento que pueda.

Casos de uso

Evita el trabajo pesado computacional cuando el desplazamiento suceden. Esta práctica garantiza que el desplazamiento sea libre de usar tanta memoria y de procesamiento como sea posible para que la experiencia sea 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 sincroniza los elementos asociados de la IU con la posición en la que se detuvo. Por ejemplo: - Sincronización de una posición de desplazamiento en el carrusel con un indicador de punto. - Sincronización de 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. Después de que terminen al deslizar puedes realizar la acción según el punto hasta el cual se haya desplazado.

También puede usar este evento para la sincronización después de la publicación el desplazamiento, o las acciones, como las estadísticas de registros.

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.