IntersectionObserver untuk Efek yang Dipicu Guliran

API IntersectionObserver secara efisien memantau apakah satu atau beberapa elemen masuk ke atau keluar dari area pandang peramban (atau elemen leluhur tertentu). Berbeda dari pendengar gulir yang dipicu pada setiap piksel, pengamat hanya memanggil fungsi panggilan balik ketika elemen melewati ambang batas, sehingga kinerjanya jauh lebih baik untuk efek berbasis gulir.

Fungsi panggilan balik menerima array objek IntersectionObserverEntry, satu untuk setiap elemen yang diamati. Setiap entri memiliki boolean isIntersecting (bernilai benar ketika terlihat) dan angka intersectionRatio antara 0 dan 1 (pecahan elemen yang sedang terlihat). Gunakan nilai-nilai ini untuk menentukan status visibilitas.

Buat pengamat di dalam useEffect dan panggil observer.observe(ref.current) untuk mulai memantau elemen. Ref harus dipasang pada elemen DOM yang ingin Anda lacak. Buat pengamat setelah komponen dipasang agar ref.current sudah terisi.

Dalam fungsi pembersihan useEffect, panggil observer.unobserve(element) untuk berhenti memantau elemen tertentu, atau observer.disconnect() untuk menghentikan semua pemantauan. Jika pembersihan dilupakan, pengamat akan tetap ada setelah komponen dilepas, sehingga berpotensi menyebabkan kesalahan atau kebocoran memori.

Opsi threshold mengatur kapan fungsi panggilan balik dipicu. Nilai 0 memicu fungsi segera setelah satu piksel pun dari elemen terlihat. Nilai 1 hanya memicu fungsi ketika elemen terlihat sepenuhnya. Anda juga dapat memberikan array seperti [0, 0.5, 1] untuk menerima panggilan balik pada beberapa tingkat visibilitas.

rootMargin memperluas atau mempersempit area perpotongan efektif menggunakan sintaksis yang menyerupai CSS: '100px 0px' memicu 100px sebelum elemen memasuki area pandang. Gunakan '-100px' agar pemicuan hanya terjadi ketika elemen berada 100px di dalam area pandang. Cara ini berguna untuk memuat lebih awal atau menganimasikan elemen sebelum terlihat sepenuhnya.

Untuk memuat gambar sesuai kebutuhan, tetapkan atribut data-src, bukan src, pada awalnya. Saat pengamat terpicu dengan isIntersecting: true, salin data-src ke src untuk memicu permintaan jaringan. Kemudian panggil observer.unobserve(entry.target) karena gambar hanya perlu dimuat sekali.

Untuk animasi kemunculan perlahan, tambahkan kelas CSS ketika isIntersecting menjadi true: element.classList.add('visible'). Tentukan transisi di CSS: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } dan .card.visible { opacity: 1; transform: none; }. Pengamat menjalankan animasi secara efisien.

IntersectionObserver ideal untuk pelacakan tampilan. Saat elemen dengan atribut data-analytics-id menjadi terlihat dan mencapai ambang 0,5, picu peristiwa analitik. Cara ini mengukur secara akurat bagian konten mana yang benar-benar dibaca pengguna, jauh lebih andal daripada persentase kedalaman pengguliran sederhana.

Satu instans IntersectionObserver dapat mengamati beberapa elemen dengan memanggil observer.observe(element) untuk setiap elemen. Semua elemen yang diamati menggunakan panggilan balik dan opsi yang sama. Gunakan entry.target di dalam panggilan balik untuk mengidentifikasi elemen mana yang memicu notifikasi.

Pengait useInView yang dapat digunakan kembali mengembalikan [ref, inView]. Pasang ref ke elemen apa pun dan baca inView untuk mengetahui apakah elemen tersebut sedang terlihat. Pengait ini menerima objek options untuk ambang dan rootMargin. Abstraksi ini membuat efek pengguliran bersifat deklaratif di komponen mana pun.

Apa arti ambang IntersectionObserver sebesar 0?

IntersectionObserver melacak visibilitas elemen secara efisien menggunakan isIntersecting dan intersectionRatio. Selalu lakukan pembersihan dengan berhenti mengamati atau memutuskan koneksi. Gunakan ambang untuk mengatur titik pemicu dan rootMargin untuk memperluas zona deteksi. Terapkan cara ini untuk pemuatan sesuai kebutuhan, animasi, dan pelacakan analitik.