Borra tus funciones de tiempo de espera y quítales los errores. Este es el evento que realmente necesitas: scrollend.
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.