Hoy presentaré un nuevo evento de JavaScript: scrollend.
No sé si ha encontrado puntos débiles sobre los eventos de desplazamiento en el proceso de desarrollo de la página web. Podemos usar el evento onscroll para monitorear si el navegador se desplaza, pero es difícil para nosotros saber cuándo se completará el desplazamiento. Podemos escribir el siguiente código:
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
Solo podemos predecir aproximadamente cuándo se completará el desplazamiento. Por ejemplo, en el código anterior, estimamos que el desplazamiento puede completarse después de 100 ms a través de setTimeout, lo que hará que la función de devolución de llamada se active durante el proceso de desplazamiento o después de un período de desplazamiento La experiencia del usuario definitivamente no es muy buena.
Con el evento scrollend, tales requisitos se vuelven mucho más simples:
document.onscrollend = event => {
…}
Entonces, ¿por qué tomó tanto tiempo para que un evento aparentemente simple fuera compatible con la plataforma web? De hecho, todavía hay muchos detalles por considerar. En realidad, hay muchos detalles sobre la ventana gráfica de la página web y el desplazamiento. Si hay una página web que está ampliada, puede desplazarse en este estado, pero en realidad no desplaza el documento, incluso esta ventana visual dirigida por el usuario. desplazamiento El evento scrollend también se activa cuando se completa la interacción. Estos son todos los escenarios en los que podría activarse el evento scrollend:
La animación del navegador finaliza o se completa el desplazamiento.
El toque del usuario se libera.
El ratón del usuario ha soltado una tecla de desplazamiento.
Se libera la clave del usuario.
Desplácese hasta la finalización del fragmento.
La captura de desplazamiento está completa.
scrollTo() se completa.
El usuario desplazó la ventana gráfica.
El evento scrollend no se activará cuando:
El gesto del usuario no provocó ningún cambio de posición de desplazamiento.
scrollTo() no produjo ningún cambio de posición.
Al igual que con otros eventos de desplazamiento, puede registrar detectores de eventos de varias maneras:
addEventListener("scrollend", (event) => {
// 滚动结束
});
aScrollingElement.addEventListener("scrollend", (event) => {
// 滚动结束
});
Las propiedades de eventos también se pueden utilizar:
document.onscrollend = (event) => {
// 滚动结束
};
aScrollingElement.onscrollend = (event) => {
// 滚动结束
};
Si desea usarlo ahora, se recomienda verificar si el evento es compatible con la versión actual del navegador:
'onscrollend' in window
// 可用
if ('onscrollend' in window) {
document.onscrollend = callback
}
else {
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
}
Este evento actualmente es compatible con la versión 109 de Firefox, y otros navegadores también brindarán soporte en el futuro:
en las versiones de navegador que aún no son compatibles, también puede usar primero el siguiente polyfill:
https://github.com/argyleink/scrollyfills
import {
scrollend} from "scrollyfills"
document.onscrollend = callback
Para mantener la experiencia de ejecución de la página sin problemas, se debe evitar la lógica de cálculo compleja en la medida de lo posible cuando se producen eventos de desplazamiento. Se recomienda realizar tantos cálculos complejos que deben activarse cuando se desplaza en el evento scrollend. Un caso de uso más común es sincronizar los elementos de la interfaz de usuario relacionados con el lugar donde se detiene el desplazamiento. Por ejemplo, el siguiente escenario sincroniza la posición de desplazamiento del carrusel con el indicador de puntos.
Sincronice la posición del carrusel de desplazamiento con el indicador de puntos.
Sincronice los elementos de la biblioteca con sus metadatos.
Obtener datos después de que el usuario se desplace a una nueva pestaña.
Puede consultar algunos escenarios de uso del mundo real y escribir en el siguiente sitio web:
https://gui-challenges.web.app/carousel/dist/
enlace de referencia
https://github.com/argyleink/scrollyfills
https://developer.chrome.com/en/blog/scrollend-a-new-javascript-event/