in view

di-view.js ?

Dapatkan pemberitahuan saat elemen DOM masuk atau keluar dari area pandang. Utilitas javascript kecil (~1,9kb gzip), bebas ketergantungan, untuk IE9+.

camwiegert.github.io/in-view

---

Instalasi

Unduh rilis terbaru dan sertakan dalam markup Anda atau instal dengan npm:

npm install --save in-view

---

Penggunaan Dasar

Dengan in-view, Anda bisa mendaftarkan penangan yang dipanggil saat elemen masuk atau keluar dari viewport. Setiap penangan menerima satu elemen, yang masuk atau keluar dari viewport, sebagai satu-satunya argumennya.

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

---

API

in-view memelihara registri penangan terpisah untuk setiap kumpulan elemen yang ditangkap dengan inView(<selector>) . Setiap registri memaparkan empat metode yang sama. in-view juga memaparkan empat metode tingkat atas. ( is , offset , threshold , test ).

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

Daftarkan penangan ke elemen yang dipilih oleh selector untuk event . Satu-satunya peristiwa yang ditampilkan dalam tampilan adalah 'enter' dan 'exit' .

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

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

Daftarkan penangan ke elemen yang dipilih oleh selector untuk event . Penangan yang terdaftar once hanya akan dipanggil satu kali.

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

inView.is(<elemen>)

Periksa apakah element ada di viewport.

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

inView.offset(<offset>)

Secara default, in-view mempertimbangkan sesuatu di area pandang jika merusak tepi area pandang mana pun. Ini dapat digunakan untuk mengatur offset dari tepi tersebut. Misalnya, offset sebesar 100 akan mempertimbangkan elemen di area pandang jika elemen tersebut merusak tepi area pandang setidaknya sebesar 100 piksel. offset dapat berupa bilangan bulat positif atau negatif.

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

Offset juga dapat diatur per arah dengan melewatkan suatu objek.

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

inView.ambang batas(<ambang>)

Tetapkan rasio tinggi dan lebar elemen yang perlu terlihat agar dapat dipertimbangkan di area pandang. Defaultnya adalah 0 , artinya jumlah berapa pun. Ambang batas 0.5 atau 1 akan mengharuskan setengah atau seluruh tinggi dan lebar elemen harus terlihat. threshold harus berupa angka antara 0 dan 1 .

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

diView.test(<tes>)

Ganti kriteria visibilitas default dalam tampilan dengan fungsi khusus. Fungsi ini akan menerima elemen dan objek opsi sebagai dua argumennya saja. Mengembalikan true ketika suatu elemen dianggap terlihat dan false jika sebaliknya.

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

diView(<selector>).check()

Periksa secara manual status elemen yang dipilih oleh selector . Secara default, semua pendaftar dicentang pada peristiwa scroll , resize , dan load window .

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

inView(<selector>).memancarkan(<event>, <elemen>)

Memancarkan event secara manual untuk setiap elemen.

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

---

Dukungan Peramban

in-view mendukung semua browser modern dan IE9+.

Sebagai peringatan kecil, in-view menggunakan MutationObserver untuk memeriksa visibilitas elemen terdaftar setelah mutasi DOM. Jika fungsionalitas itu yang Anda perlukan di IE9-10, pertimbangkan untuk menggunakan polyfill.

---

Pertunjukan

Perpustakaan apa pun yang memantau peristiwa gulir berisiko menurunkan kinerja halaman. Untuk memitigasi hal ini, saat ini, in-view hanya mendaftarkan satu event pendengar yang dibatasi (maksimum sekali setiap 100 md) pada setiap peristiwa load , resize , dan scroll window dan menggunakannya untuk menjalankan pemeriksaan pada setiap registri.

Memanfaatkan IntersectionObserver

Ada API browser baru, IntersectionObserver , yang bertujuan untuk memberikan pengembang cara yang efektif untuk memeriksa visibilitas elemen DOM. Ke depannya, in-view akan bertujuan untuk mendelegasikan ke IntersectionObserver jika didukung, dan kembali ke polling hanya jika diperlukan.

---

Lisensi MIT