in view

in-view.js ?

Lassen Sie sich benachrichtigen, wenn ein DOM-Element das Ansichtsfenster betritt oder verlässt. Ein kleines (ca. 1,9 KB komprimiertes), abhängigkeitsfreies Javascript-Dienstprogramm für IE9+.

camwiegert.github.io/in-view

---

Installation

Laden Sie entweder die neueste Version herunter und fügen Sie sie in Ihr Markup ein oder installieren Sie sie mit npm:

npm install --save in-view

---

Grundlegende Verwendung

Mit in-view können Sie Handler registrieren, die aufgerufen werden, wenn ein Element das Ansichtsfenster betritt oder verlässt . Jeder Handler erhält als einziges Argument ein Element, nämlich dasjenige, das in das Ansichtsfenster eintritt oder es verlässt.

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

---

API

in-view verwaltet eine separate Handler-Registrierung für jeden Satz von Elementen, die mit inView(<selector>) erfasst werden. Jede Registrierung stellt dieselben vier Methoden bereit. in-view macht außerdem vier Methoden der obersten Ebene verfügbar. ( is , offset , threshold , test ).

inView(<selector>).on(<event>, <handler>)

Registrieren Sie einen Handler für die vom selector für event ausgewählten Elemente. Die einzigen sichtbaren Ereignisse sind 'enter' und 'exit' .

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

inView(<selector>).once(<event>, <handler>)

Registrieren Sie einen Handler für die vom selector für event ausgewählten Elemente. once registrierte Handler werden nur einmal aufgerufen.

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

inView.is(<element>)

Überprüfen Sie, ob sich element im Ansichtsfenster befindet.

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

inView.offset(<offset>)

Standardmäßig berücksichtigt In-View etwas im Ansichtsfenster, wenn es eine Kante des Ansichtsfensters durchbricht. Dies kann verwendet werden, um einen Versatz von dieser Kante festzulegen. Bei einem Versatz von 100 werden beispielsweise Elemente im Ansichtsfenster berücksichtigt, wenn sie eine Kante des Ansichtsfensters um mindestens 100 Pixel unterbrechen. offset kann eine positive oder negative ganze Zahl sein.

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

Der Offset kann auch pro Richtung festgelegt werden, indem ein Objekt übergeben wird.

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

inView.threshold(<threshold>)

Legen Sie das Verhältnis der Höhe und Breite eines Elements fest, das sichtbar sein muss, damit es im Ansichtsfenster berücksichtigt wird. Der Standardwert ist 0 , also ein beliebiger Betrag. Ein Schwellenwert von 0.5 oder 1 erfordert, dass die Hälfte bzw. die gesamte Höhe und Breite eines Elements sichtbar sein muss. threshold muss eine Zahl zwischen 0 und 1 sein.

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

inView.test(<test>)

Überschreiben Sie die standardmäßigen Sichtbarkeitskriterien von In-View mit einer benutzerdefinierten Funktion. Diese Funktion erhält das Element und das Optionsobjekt als einzige zwei Argumente. Gibt true zurück, wenn ein Element als sichtbar betrachtet werden soll, andernfalls false .

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

inView(<selector>).check()

Überprüfen Sie manuell den Status der vom selector ausgewählten Elemente. Standardmäßig werden alle Registrierungen bei scroll , resize und load -Ereignissen des window überprüft.

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

inView(<selector>).emit(<event>, <element>)

Manuelles Ausgeben event für jedes einzelne Element.

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

---

Browser-Unterstützung

in-view unterstützt alle modernen Browser und IE9+.

Als kleine Einschränkung verwendet in-view MutationObserver, um die Sichtbarkeit registrierter Elemente nach einer DOM-Mutation zu überprüfen. Wenn Sie diese Funktionalität in IE9-10 benötigen, sollten Sie die Verwendung einer Polyfüllung in Betracht ziehen.

---

Leistung

Jede Bibliothek, die Scroll-Ereignisse überwacht, läuft Gefahr, die Seitenleistung zu beeinträchtigen. Um dies zu mildern, registriert in-view derzeit nur einen einzigen, gedrosselten (maximal alle 100 ms) Ereignis-Listener für jedes load , resize und scroll -Ereignis von window und verwendet diese, um eine Prüfung für jede Registrierung durchzuführen.

Verwendung von IntersectionObserver

Es gibt eine neue Browser-API, IntersectionObserver , die Entwicklern eine leistungsstarke Möglichkeit bieten soll, die Sichtbarkeit von DOM-Elementen zu überprüfen. Künftig wird in-view darauf abzielen, an IntersectionObserver zu delegieren, wenn dies unterstützt wird, und nur bei Bedarf auf Abfragen zurückzugreifen.

---

Lizenz MIT