Borra las funciones de tiempo de espera y elimina sus errores. Este es el evento que realmente necesitas: desplazamiento.
Antes del evento scrollend, no había una forma confiable de detectar que se completó un desplazamiento. Esto significaba que los eventos se activarían tarde o mientras el dedo del usuario todavía estuviera abajo en la pantalla. Esta falta de confiabilidad para saber cuándo finalizó 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 setTimeout() es saber si se detuvo el desplazamiento para 100ms. Esto hace que sea más similar a un evento de desplazamiento que a un evento de finalización.
Después del evento scrollend, el navegador hace toda esta difícil evaluación por ti.
document.onscrollend = event => {…}
Eso es 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 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 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 a la que te acerques. Puedes desplazarte en este estado de zoom, y este no necesariamente se desplaza por el documento. Ten la seguridad de que incluso esta interacción de desplazamiento controlada por el usuario de viewport visual 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 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
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)
}
}
Es un comienzo saludable para mejorar de forma progresiva 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 sea libre de usar tanta memoria y procesamiento como sea posible para mantener una experiencia fluida. El uso de un evento scrollend proporciona el momento perfecto para llamar a la función y hacer el trabajo pesado, porque ya no se produce el desplazamiento.
El evento scrollend se puede usar para activar varias acciones. Un caso de uso común es sincronizar los elementos asociados de la IU con la posición en la que se detuvo el desplazamiento. Por ejemplo:
- Sincronización de una posición de desplazamiento de 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. Una vez que termine de deslizar, puedes realizar la acción según el punto hasta el que se desplazó.
También puedes usar este evento para sincronizar después de un desplazamiento programático o del usuario, o 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.