Scrollend, un nouvel événement JavaScript

Supprimez vos fonctions de délai avant expiration et éliminez leurs bugs. Voici l'événement dont vous avez vraiment besoin : scrollend.

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 encore sur l'écran. Cette incertitude quant à la fin du défilement entraînait des bugs et une mauvaise expérience pour l'utilisateur.

Avant

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

La meilleure stratégie setTimeout() possible consiste à savoir si le défilement s'est arrêté pour 100ms. Cela ressemble davantage à un événement de mise en pause du défilement qu'à un événement de fin de défilement.

Après l'événement scrollend, le navigateur effectue toute cette évaluation complexe pour vous.

Après

document.onscrollend = event => {…}

C'est le bon côté des choses. Ils sont parfaitement synchronisés et contiennent de nombreuses conditions significatives avant d'être émis.

Browser Support

• 114
• 114
• 109
• 26.2

Source

Essayer

Détails de l'événement

L'événement scrollend se déclenche lorsque : - Le navigateur n'anime plus ni ne traduit le défilement. - L'utilisateur a relâché l'écran. - Le pointeur de l'utilisateur a relâché la barre de défilement. - L'utilisateur a relâché la touche. - Le défilement jusqu'au fragment est terminé. - Le défilement scroll-snap 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 lorsque : - Le geste d'un utilisateur n'a entraîné aucune modification de la position de défilement (aucune translation n'a eu lieu). - scrollTo() n'a donné lieu à aucune traduction.

Si cet événement a mis autant de temps à arriver sur la plate-forme Web, c'est en raison des nombreux petits détails qui nécessitaient des spécifications. L'un des aspects les plus complexes a été d'articuler les détails scrollend pour la fenêtre d'affichage visuelle par rapport au document. Prenons l'exemple d'une page Web sur laquelle vous effectuez un zoom avant. Vous pouvez faire défiler l'écran lorsque vous êtes dans cet état de zoom, et cela ne fait pas nécessairement défiler le document. Sachez que même cette interaction de défilement de la fenêtre d'affichage visuelle déclenché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("scroll>end", (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 utiliser ce nouvel événement dès maintenant, voici nos meilleurs conseils. Vous pouvez continuer à utiliser votre stratégie de fin de défilement actuelle (si vous en avez une) et, au début de celle-ci, vérifier la compatibilité avec :

'onscrollend' in window
// true, if available

Cela renverra "true" ou "false" selon que le navigateur propose l'événement ou non. Cette vérification vous permet de créer une branche du 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éé et qui fait de son mieux :

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

Le polyfill s'améliorera progressivement pour utiliser l'événement 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 estimer au mieux la fin de l'événement.

Cas d'utilisation

Il est recommandé d'éviter les tâches lourdes en calcul pendant le défilement. Cette pratique garantit que le défilement peut utiliser autant de mémoire et de traitement que possible pour que l'expérience reste fluide. L'utilisation d'un événement scrollend est le moment idéal pour appeler et effectuer le travail difficile, car le défilement n'est plus en cours.

L'événement scrollend peut être utilisé pour déclencher différentes actions. Un cas d'utilisation courant consiste à synchroniser les éléments d'interface utilisateur associés avec la position d'arrêt du défilement. Par exemple : - Synchroniser la position de défilement d'un carrousel avec un indicateur à points. - Synchronisation d'un élément de la galerie avec ses métadonnées. - Récupérer des données après qu'un utilisateur a fait défiler l'écran jusqu'à un nouvel onglet.

Imaginons un scénario dans lequel un utilisateur balaie un e-mail pour le supprimer. Une fois qu'il a terminé, vous pouvez 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 où plusieurs éléments, tels que les flèches, les points et la mise au point, doivent être mis à jour en fonction de la position de défilement. Regardez comment j'ai créé ce carrousel sur YouTube. Vous pouvez également essayer la démo en direct.

Merci à Mehdi Kazemi pour son travail d'ingénierie sur ce sujet et à Robert Flack pour ses conseils sur l'API et l'implémentation.