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: déroulantend.

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 lorsque le doigt de l'utilisateur était toujours posé sur l'écran. Ce manque de fiabilité de savoir quand le défilement est terminé, ce qui entraîne des bugs et une mauvaise expérience pour l'utilisateur.

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

Le meilleur moyen d'utiliser cette stratégie setTimeout() est de savoir si le défilement s'est arrêté pour 100ms. Cela ressemble davantage à un événement de défilement qui a été mis en pause, et non à un événement de fin de défilement.

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

document.onscrollend = event => {…}

C'est la bonne chose. Exactement chronométré et rempli de conditions pertinentes avant l'émission.

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 de l'utilisateur n'a pas entraîné de changement de position du défilement (aucune traduction). - 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'était en raison des nombreux petits détails qui nécessitaient des spécifications. L'un des domaines les plus complexes consistait à articuler les détails de scrollend entre la fenêtre d'affichage visuelle et le document. Prenons l'exemple d'une page Web sur laquelle vous faites un zoom avant. Vous pouvez faire défiler l'écran lorsque vous utilisez cet état de zoom, sans nécessairement faire défiler le document. Soyez assuré que même cette interaction de défilement piloté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
});

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 continuer à utiliser votre stratégie de fin de défilement actuelle (si vous en avez une) et vérifier la compatibilité au début de celle-ci avec:

'onscrollend' in window
// true, if available

La valeur "true" ou "false" est alors renvoyée selon que le navigateur propose l'événement. Grâce à 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 point de départ 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 exploite au mieux le navigateur:

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'événement scrollend intégré au navigateur, le cas échéant. Si ce n'est pas le cas, 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 gourmandes en ressources de calcul lors du défilement. Cette pratique garantit que le défilement utilise autant de mémoire et de traitement que possible pour une expérience fluide. L'utilisation d'un événement scrollend constitue le moment idéal pour appeler et effectuer le plus gros du travail, 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 l'endroit où le défilement s'est arrêté. Par exemple : - Synchronisation d'une position de défilement de 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. Une fois qu'ils ont terminé de balayer l'écran, 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 le défilement programmatique 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 le focus, 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 sur ce sujet et à Robert Flack pour ses conseils concernant les API et l'implémentation.