L'API IntersectionObserver nous permet de suivre la visibilité des éléments HTML, mais comment l'utiliser dans React?
L'API IntersectionObserver nous permet de détecter lorsqu'un élément que nous surveillons est visible. l'écran à l'utilisateur. C’est peut-être une définition trop simpliste (voire incorrecte) de son fonctionnement, techniquement réalisée en observant le moment où l’élément cible croise un ancêtre (ou la fenêtre elle-même), mais la réalité est qu’il est plus facile à comprendre en pensant: si un élément HTML spécifique est visible ou non pour l'utilisateur.
IntersectionObserver a de nombreuses utilisations, et vous pouvez utiliser cette API pour:
- Charger des données supplémentaires lorsque l'utilisateur fait défiler l'écran jusqu'à la fin de l'écran
- Suivre les paragraphes d'un article qui ont été lus
- Animer un élément la première fois qu'il est visible à l'écran
- Suivre les impressions d'une annonce ou d'un produit
- Lire ou mettre en pause une vidéo lorsqu'elle est visible
- Chargement paresseux les images lorsqu'elles défilent dans la vue
Dans cet article, nous verrons non seulement comment utiliser l'API IntersectionObserver pour créer une page de défilement infinie, mais également comment suivre la durée pendant laquelle chaque paragraphe d'un article a été visible. utilisateur. explique bien IntersectionObserver mais celui-ci portera plus particulièrement sur son utilisation dans React.
La solution finale et [Live]. sont disponibles dans les liens précédents.
Notions fondamentales d'IntersectionObserver
Avant de plonger dans les détails de son fonctionnement dans React, voyons l'utilisation la plus élémentaire d'IntersectionObserver. La première étape consiste à créer un observateur:
const callback = entrées => {
entrées . pourChaque ( entrée => {
si ( entrée . est intégralement isolé du lieu suivant.] {
console . log ( `Nous affichons $ { entrée . target } `
-
]) ;
}
} ) ;
} ;
const options = { seuil : 0.5 } ;
const observer = nouveau IntersectionObserver ( callback
Source link