in view

in-view.js ?

Soyez averti lorsqu'un élément DOM entre ou sort de la fenêtre. Un petit utilitaire javascript (~ 1,9 Ko gzippé), sans dépendance pour IE9+.

camwiegert.github.io/in-view

---

Installation

Téléchargez la dernière version et incluez-la dans votre balisage ou installez-la avec npm :

npm install --save in-view

---

Utilisation de base

Avec in-view, vous pouvez enregistrer les gestionnaires qui sont appelés lorsqu'un élément entre ou sort de la fenêtre. Chaque gestionnaire reçoit un élément, celui qui entre ou sort de la fenêtre, comme seul argument.

 inView ( '.someSelector' )
    . on ( 'enter' , doSomething )
    . on ( 'exit' , el => {
        el . style . opacity = 0.5 ;
    } ) ; 

---

API

in-view gère un registre de gestionnaires distinct pour chaque ensemble d'éléments capturés avec inView(<selector>) . Chaque registre expose les quatre mêmes méthodes. in-view expose également quatre méthodes de niveau supérieur. ( is , offset , threshold , test ).

inView(<sélecteur>).on(<événement>, <gestionnaire>)

Enregistrez un gestionnaire pour les éléments sélectionnés par selector pour event . Les seuls événements émis dans la vue sont 'enter' et 'exit' .

 inView ( '.someSelector' ) . on ( 'enter' , doSomething ) ;

inView(<sélecteur>).once(<événement>, <gestionnaire>)

Enregistrez un gestionnaire pour les éléments sélectionnés par selector pour event . Les gestionnaires enregistrés once ne seront appelés qu’une seule fois.

 inView ( '.someSelector' ) . once ( 'enter' , doSomething ) ;

inView.is(<élément>)

Vérifiez si element est dans la fenêtre.

 inView . is ( document . querySelector ( '.someSelector' ) ) ;
// => true

inView.offset(<décalage>)

Par défaut, In-View considère quelque chose dans la fenêtre s'il brise un bord de la fenêtre. Ceci peut être utilisé pour définir un décalage par rapport à ce bord. Par exemple, un décalage de 100 prendra en compte les éléments dans la fenêtre s'ils coupent un bord de la fenêtre d'au moins 100 pixels. offset peut être un entier positif ou négatif.

 inView . offset ( 100 ) ;
inView . offset ( - 50 ) ;

Le décalage peut également être défini par direction en passant un objet.

 inView . offset ( {
    top : 100 ,
    right : 75 ,
    bottom : 50 ,
    left : 25
} ) ;

inView.threshold(<seuil>)

Définissez le rapport entre la hauteur et la largeur d'un élément qui doit être visible pour qu'il soit pris en compte dans la fenêtre. La valeur par défaut est 0 , ce qui signifie n'importe quel montant. Un seuil de 0.5 ou 1 nécessitera que la moitié ou la totalité, respectivement, de la hauteur et de la largeur d'un élément soient visibles. threshold doit être un nombre compris entre 0 et 1 .

 inView . threshold ( 0 ) ;
inView . threshold ( 0.5 ) ;
inView . threshold ( 1 ) ;

inView.test(<test>)

Remplacez les critères de visibilité par défaut d'In-View par une fonction personnalisée. Cette fonction recevra l'élément et l'objet options comme ses deux seuls arguments. Renvoie true lorsqu'un élément doit être considéré comme visible et false dans le cas contraire.

 inView . test ( ( el , options ) => {
    // ...
} ) ;

inView(<sélecteur>).check()

Vérifiez manuellement l'état des éléments sélectionnés par selector . Par défaut, tous les registres sont vérifiés lors des événements scroll , resize et load de window .

 inView ( '.someSelector' ) . check ( ) ;

inView(<sélecteur>).emit(<événement>, <élément>)

Émettez manuellement event pour n’importe quel élément.

 inView ( '.someSelector' ) . emit ( 'exit' , document . querySelectorAll ( '.someSelector' ) [ 0 ] ) ; 

---

Prise en charge du navigateur

in-view prend en charge tous les navigateurs modernes et IE9+.

À titre de petite mise en garde, in-view utilise MutationObserver pour vérifier la visibilité des éléments enregistrés après une mutation DOM. Si c'est une fonctionnalité dont vous avez besoin dans IE9-10, envisagez d'utiliser un polyfill.

---

Performance

Toute bibliothèque qui surveille les événements de défilement court le risque de dégrader les performances des pages. Pour atténuer cela, actuellement, in-view n'enregistre qu'un seul écouteur d'événement limité (maximum une fois toutes les 100 ms) sur chacun des événements load , resize et scroll de window et les utilise pour exécuter une vérification sur chaque registre.

Utiliser IntersectionObserver

Il existe une API de navigateur émergente, IntersectionObserver , qui vise à fournir aux développeurs un moyen performant de vérifier la visibilité des éléments DOM. À l’avenir, in-view visera à déléguer à IntersectionObserver lorsqu’il est pris en charge, en revenant à l’interrogation uniquement lorsque cela est nécessaire.

---

Licence MIT