Scrollend, un nouvel événement JavaScript

Supprimez vos fonctions de délai d'inactivité et secouez leurs bugs. Voici l'événement dont vous avez vraiment besoin: dropend.

Adam Argyle

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 alors que le doigt de l'utilisateur était toujours sur l'écran. Cette imprécision pour savoir quand le défilement a réellement pris fin a entraîné des bugs et une mauvaise expérience pour l'utilisateur.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Le mieux que cette stratégie setTimeout() puisse faire est de savoir si le défilement s'est arrêté pour 100ms. Cela ressemble davantage à un défilement mis en pause, événement terminé.

Après l'événement scrollend, le navigateur effectue toutes ces évaluations difficiles à votre place.

document.onscrollend = event => {…}

C'est bien. Des conditions idéales au bon moment et pleines de conditions avant d'émettre.

Essayer

Détails de l'événement

L'événement scrollend se déclenche lorsque : - Le navigateur n'anime plus ni ne traduit plus le défilement. - Le contact de l'utilisateur a été relâché. - 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.

La raison pour laquelle cet événement a mis si longtemps à arriver sur la plate-forme Web est due aux nombreux petits détails qui nécessitaient des spécifications détaillées. L'un des domaines les plus complexes expliquait 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. Sachez que même cette interaction de défilement visuelle pilotée par l'utilisateur émettra l'événement scrollend une fois 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é 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), au début, vérifiez la compatibilité avec:

'onscrollend' in window
// true, if available

La valeur renvoyée sera "true" ou "false" selon que le navigateur propose l'événement. Avec cette vérification, vous pouvez créer une branche de 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 un polyfill (NPM) que j'ai créé pour que le navigateur fonctionne au mieux :

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 le scrollend intégré au navigateur s'il est disponible. Si elle n'est pas disponible, le script surveille les événements de pointeur et le défilement pour obtenir la meilleure estimation possible de la fin de l'événement.

Cas d'utilisation

Il est recommandé d'éviter les tâches de calcul lourdes pendant le défilement. Cette pratique garantit que le défilement peut utiliser autant de mémoire et de traitement que possible pour assurer 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. 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 dans un carrousel avec un indicateur de points - Synchroniser un élément de galerie avec ses métadonnées. - Récupération de données après qu'un utilisateur a fait défiler 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 un défilement programmatique ou utilisateur, ou pour des actions telles que la journalisation des données analytiques.

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.