Borra las funciones de tiempo de espera y elimina sus errores. Este es el evento que realmente necesitas: Scrollend.
Antes del evento scrollend, no había una forma confiable de detectar que se completara un desplazamiento. Esto significa que los eventos se activaban tarde o mientras el dedo del usuario aún estaba en la pantalla. La falta de confiabilidad para saber cuándo termina el desplazamiento generó 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 de setTimeout() es saber si el desplazamiento se detuvo para 100ms. Esto hace que sea más como si un desplazamiento haya pausado un evento, no como si un desplazamiento haya finalizado.
Después del evento scrollend, el navegador realiza toda esta evaluación difícil por ti.
document.onscrollend = event => {…}
Eso es bueno. perfectamente cronometrado y lleno de condiciones significativas antes de emitirse.
Pruébala
Detalles del evento
El evento scrollend se activa en los siguientes casos:
- El navegador ya no anima ni traduce desplazamiento.
- Se liberó la acción táctil del usuario.
- El puntero del usuario liberó el círculo de desplazamiento.
- Se liberó la presión de la tecla del usuario.
- Se completó el desplazamiento hasta el fragmento.
- Se completó la ajuste de desplazamiento.
- Se completó scrollTo().
- El usuario se desplazó por la ventana de visualización.
El evento scrollend no se activa en los siguientes casos:
- El gesto de un usuario no generó cambios de posición 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 fue debido a la cantidad de detalles pequeños que necesitaban los detalles de las especificaciones. Una de las áreas más complejas fue articular los detalles de scrollend para la ventana de visualización visual frente al documento. Piensa en una página web en la que acercas la imagen. Puedes desplazarte en este estado ampliado sin desplazar el documento. Ten la seguridad de que incluso esta interacción de desplazamiento visual de viewport impulsada por el usuario 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 dos 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
};
Polyfills y mejora progresiva
Si quieres usar este nuevo evento ahora, aquí tienes nuestros mejores consejos. Puedes seguir usando tu estrategia de fin de desplazamiento actual (si tienes una) y, al comienzo, verifica la compatibilidad con lo siguiente:
'onscrollend' in window
// true, if available
Con esta opción, se mostrará el valor "true" o "false" 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 lo mejor que puede hacer 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 de la finalización del evento que pueda.
Casos de uso
Se recomienda evitar el trabajo pesado de procesamiento mientras se realiza el desplazamiento. Esta práctica garantiza que el desplazamiento sea libre de usar tanta memoria y procesamiento como sea posible para mantener una experiencia fluida. Usar un evento scrollend proporciona el momento perfecto para llamar y hacer el trabajo duro, porque el desplazamiento ya no se realiza.
El evento scrollend se puede usar para activar varias acciones. Un caso de uso común es la sincronización de elementos de la IU asociados con la posición que detuvo el desplazamiento. Por ejemplo:
- Sincronizar una posición de desplazamiento del 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. Después de que terminen de deslizar el dedo, puedes realizar la acción según el lugar hasta el que se desplazó.
También puedes usar este evento para la sincronización después del desplazamiento programático o del usuario, o bien para acciones como las estadísticas de registro.
A continuación, se muestra un buen ejemplo en el que varios elementos, como flechas, puntos y enfoque, deben actualizarse según la posición de desplazamiento. Mira cómo desarrollé este carrusel en YouTube. Además, prueba la demostración en vivo.
Gracias a Mehdi Kazemi por su trabajo de ingeniería y a Robert Flack por su orientación en cuanto a las APIs y la implementación.