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 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.