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 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.

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.