Scrollend, un nouvel événement JavaScript

Supprimez vos fonctions de délai avant expiration et corrigez les bugs associés. Voici l'événement dont vous avez vraiment besoin: Scrollend.

Adam Argyle

Twitter GitHub

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.