Supprimez vos fonctions de délai d'inactivité et secouez leurs bugs. Voici l'événement dont vous avez vraiment besoin: déroulantend.
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 pendant que le doigt de l'utilisateur
était toujours affichée à l'écran. Ce manque de fiabilité de savoir quand le défilement a
se sont terminés, ce qui a entraîné des bugs
et une mauvaise expérience pour l'utilisateur.
document.onscroll = event => { clearTimeout(window.scrollEndTimer) window.scrollEndTimer = setTimeout(callback, 100) }
La meilleure solution pour cette stratégie setTimeout()
est de savoir si le défilement s'est arrêté pendant
100ms
Cela ressemble davantage à un
défilement mis en pause,
événement terminé.
Après le
scrollend
le navigateur effectue toutes ces tâches d'évaluation à votre place.
document.onscrollend = event => {…}
C'est la bonne chose. Des conditions idéales au bon moment et pleines de conditions avant d'émettre.
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Essayer
Détails de l'événement
L'événement scrollend
se déclenche lorsque:
- Le navigateur n'anime plus ou ne traduit plus le défilement.
- L'appui de l'utilisateur a été libéré.
- Le curseur de l'utilisateur a libéré le curseur de défilement.
- La pression de touche de l'utilisateur a été relâchée.
- Le défilement jusqu'au fragment est terminé.
- L'ancrage du défilement est terminé.
- scrollTo()
est terminé.
- L'utilisateur a fait défiler la fenêtre d'affichage visuelle.
L'événement scrollend
ne se déclenche pas dans les cas suivants:
- Le geste d'un utilisateur n'a pas entraîné de changement de position du défilement (aucune traduction n'a eu lieu).
- scrollTo()
n'a généré aucune traduction.
Si cet événement a pris tant de temps avant d'arriver sur la plate-forme Web, c'est dû aux nombreux
de petits détails qui nécessitaient
des détails de spécification. L'un des domaines les plus complexes
articulait les détails de scrollend
pour la fenêtre d'affichage visuelle
par rapport au document. Prenons l'exemple d'une page Web sur laquelle vous faites un zoom avant. Vous pouvez faire défiler
lorsque vous avez fait un zoom avant, et qu'il ne suffit pas de faire défiler
document. Soyez assuré que même cette fenêtre d'affichage visuelle
l'interaction é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
});
ou utilisez la propriété d'événement:
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 Continuez à utiliser votre stratégie actuelle de fin de défilement (si vous en avez une), commencez par vérifier la compatibilité avec:
'onscrollend' in window
// true, if available
La valeur "true" ou "false" est alors renvoyée selon que le navigateur propose l'événement. Avec pour cette vérification, vous pouvez diviser le code:
if ('onscrollend' in window) {
document.onscrollend = callback
}
else {
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
}
C'est un bon début pour améliorer progressivement votre événement scrollend
lorsqu'il
est disponible. Vous pouvez également essayer
polyfill
(NPM) que j'ai créé
le navigateur peut:
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
Le polyfill sera progressivement amélioré pour utiliser l'scrollend
intégré au navigateur
s'il est disponible. S'il n'est pas disponible, le script surveille les événements de pointeur et
faites défiler la page pour obtenir une estimation optimale de l'heure à laquelle l'événement se termine.
Cas d'utilisation
Il est recommandé d'éviter les tâches fastidieuses en calcul lorsque le défilement est
des événements. Cette pratique garantit que le défilement
est libre d’utiliser autant de mémoire et
pour garantir une expérience fluide. Utiliser un événement scrollend
c'est le moment idéal pour faire le gros du travail, car le défilement est
ne se produisent plus.
L'événement scrollend
peut être utilisé pour déclencher diverses actions. Cas d'utilisation courant
synchronise les éléments d'interface utilisateur associés avec la position à laquelle le défilement
s'est arrêtée. Par exemple:
- Synchronisation d'une position de défilement dans un carrousel avec un indicateur de points
- Synchronisation d'un élément de galerie avec ses métadonnées
- Récupération des données après que l'utilisateur a fait défiler l'écran jusqu'à un nouvel onglet.
Imaginez un scénario comme celui d'un utilisateur qui balaie un e-mail. Après avoir terminé vous pouvez ensuite effectuer l'action en fonction de l'endroit où il a fait défiler l'écran.
Vous pouvez également utiliser cet événement pour la synchronisation après le programmatique ou ou d'actions telles que l'analyse de journaux.
Voici un bon exemple dans lequel plusieurs éléments tels que des flèches, des points et un focus, 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 sur ce sujet et à Robert Flack pour ses conseils concernant les API et l'implémentation.