Supprimez vos fonctions de délai avant expiration et corrigez les bugs associés. Voici l'événement dont vous avez vraiment besoin: Scrollend.
Avant l'événement scrollend
, il n'existait aucun moyen fiable de détecter qu'un défilement était terminé. Cela signifiait que les événements se déclenchaient tardivement ou lorsque le doigt de l'utilisateur était encore sur l'écran. Ce manque de fiabilité concernant la détection de la fin du défilement entraînait des bugs et une mauvaise expérience utilisateur.
document.onscroll = event => { clearTimeout(window.scrollEndTimer) window.scrollEndTimer = setTimeout(callback, 100) }
La meilleure chose à faire avec cette stratégie setTimeout()
est de savoir si le défilement s'est arrêté pour 100ms
. Cela donne plus de sentiment qu'un événement de défilement a été mis en pause, et non qu'un événement de défilement s'est terminé.
Après l'événement scrollend
, le navigateur effectue cette évaluation difficile pour vous.
document.onscrollend = event => {…}
C'est la bonne chose. Parfaitement chronométré et rempli de conditions significatives avant d'émettre.
Essayer
Détails de l'événement
L'événement scrollend
se déclenche lorsque :
- Le navigateur n'anime plus le défilement ou ne traduit plus le défilement.
- La pression de l'utilisateur a été libérée.
: le pointeur de l'utilisateur a libéré le curseur de défilement.
- L'appui sur la touche de l'utilisateur a été libéré.
- Le défilement jusqu'au fragment est terminé.
- Le défilement est terminé.
- scrollTo()
: terminé.
- L'utilisateur a fait défiler la fenêtre d'affichage.
L'événement scrollend
ne se déclenche pas dans les cas suivants :
- Le geste de l'utilisateur n'a pas entraîné de changement de position du défilement (aucune traduction).
- scrollTo()
n'a donné aucune traduction.
La mise en place de cet événement sur la plate-forme Web a pris si longtemps, en raison des nombreux petits détails qui nécessitaient des informations de spécification. L'une des zones les plus complexes a été de définir les détails de scrollend
pour la fenêtre d'affichage par rapport au document. Prenons l'exemple d'une page Web sur laquelle vous faites un zoom avant. Lorsque l'utilisateur est en mode zoom, vous pouvez faire défiler la page, même si le document n'est pas fait défiler. Sachez que même cette interaction de défilement dirigée par l'utilisateur dans la fenêtre d'affichage visuelle émettra l'événement scrollend
une fois l'opération terminée.
Utiliser l'événement
Comme pour les autres événements de défilement, vous pouvez enregistrer des écouteurs de différentes manières.
addEventListener("scrollend", (event) => {
// scroll ended
});
aScrollingElement.addEventListener("scrollend", (event) => {
// scroll ended
});
Vous pouvez également utiliser la propriété "event" :
document.onscrollend = (event) => {
// scroll ended
};
aScrollingElement.onscrollend = (event) => {
// scroll ended
};
Polyfills et amélioration progressive
Si vous souhaitez profiter de ce nouvel événement dès maintenant, voici notre meilleur conseil. Vous pouvez continuer à utiliser votre stratégie actuelle de fin de défilement (si vous en avez une). À partir de maintenant, vérifiez la compatibilité avec:
'onscrollend' in window
// true, if available
La valeur "true" ou "false" s'affiche selon que le navigateur propose l'événement. Cette vérification vous permet de diviser le code:
if ('onscrollend' in window) {
document.onscrollend = callback
}
else {
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
}
Il s'agit d'un bon début pour améliorer progressivement votre événement scrollend
lorsqu'il est disponible. Vous pouvez également essayer un polyfill (NPM) que j'ai créé et qui obtient de meilleures performances avec le navigateur:
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
Le polyfill est progressivement amélioré pour utiliser l'événement scrollend
intégré au navigateur, le cas échéant. S'il n'est pas disponible, le script surveille les événements de pointeur et fait défiler la page pour estimer au mieux l'événement qui se termine.
Cas d'utilisation
Il est recommandé d'éviter les tâches de calcul lourdes lors du défilement. Cette pratique garantit que le défilement est libre d'utiliser autant de mémoire et de traitement que possible pour assurer la fluidité de l'expérience. L'utilisation d'un événement scrollend
est le moment idéal pour faire un appel et effectuer le travail difficile, car il n'y a plus de défilement.
L'événement scrollend
peut être utilisé pour déclencher diverses actions. Un cas d'utilisation courant consiste à synchroniser les éléments d'interface utilisateur associés avec la position à laquelle le défilement s'est arrêté. Par exemple :
- Synchronisation d'une position de défilement de carrousel avec un indicateur de point
- Synchronisation d'un élément de la galerie avec ses métadonnées
- Extraire des données après que l'utilisateur a fait défiler la page jusqu'à un nouvel onglet
Imaginez un scénario comme un utilisateur qui balaie un e-mail. Une fois le balayage effectué, vous pouvez effectuer l'action en fonction de l'endroit où ils ont fait défiler l'écran.
Vous pouvez également utiliser cet événement pour la synchronisation après un défilement automatisé ou par l'utilisateur, ou pour des actions telles que l'analyse de journaux.
Voici un bon exemple dans lequel plusieurs éléments (tels que les flèches, les points et l'attention) doivent être mis à jour en fonction de la position de défilement. Découvrez comment j'ai créé ce carrousel sur YouTube. Vous pouvez également essayer la démonstration en direct.
Merci à Mehdi Kazemi pour son travail d'ingénierie dans ce domaine, et à Robert Flack pour ses conseils sur l'API et l'implémentation.