#3 Javascript Fundamental: Mengenal Intersection Observer API v1 dan v2: Cara Deteksi Elemen yang Terlihat di Screen

Ini Cara Deteksi Elemen yang Terlihat di Screen

Saat membangun aplikasi web modern, ada banyak case di mana kita perlu mengetahui apakah sebuah elemen sedang terlihat oleh user atau tidak. Misalnya untuk lazy loading gambar, infinite scroll, animasi ketika komponen muncul di layar, hingga menghitung impression iklan.

Dulu, solusi yang paling sering digunakan adalah event scroll. Masalahnya, event ini bisa dipanggil puluhan bahkan ratusan kali dalam hitungan detik ketika pengguna melakukan scrolling. Akibatnya developer harus menambahkan berbagai optimasi seperti debounce atau throttle agar performa aplikasi tetap terjaga.

Untungnya, browser modern menyediakan solusi yang jauh lebih efisien melalui Intersection Observer API.

Intersection Observer API v1

Intersection Observer API pertama kali hadir untuk membantu developer mendeteksi kapan sebuah elemen masuk atau keluar dari viewport tanpa harus melakukan perhitungan posisi secara terus-menerus.

Contoh penggunaannya cukup sederhana:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log("Element terlihat");
    }
  });
});

observer.observe(element);

Ketika elemen mulai terlihat di layar, callback akan dipanggil oleh browser. Karena perhitungan dilakukan secara internal oleh browser, performanya jauh lebih baik dibandingkan memasang listener scroll yang aktif sepanjang waktu.

Use case yang paling umum untuk v1 antara lain:

Lazy loading image
Infinite scrolling
Trigger animation saat elemen muncul
Analytics sederhana
Auto play video ketika masuk viewport

Limitasi Intersection Observer v1

Meskipun sangat berguna, Intersection Observer v1 memiliki satu kelemahan penting: API ini hanya mengetahui apakah elemen berada di dalam viewport, bukan apakah elemen tersebut benar-benar terlihat oleh pengguna.

Bayangkan sebuah banner iklan berada 100% di viewport. Secara teknis, Intersection Observer akan menganggap banner tersebut terlihat. Namun bagaimana jika banner itu tertutup modal, overlay transparan, popup, atau elemen lain yang posisinya berada di atas banner?

Intersection Observer v1, elemen tersebut tetap dianggap visible.

Untuk kebutuhan UI biasa, hal ini tidak menjadi masalah. Namun untuk kebutuhan seperti impression iklan, analytics, atau sistem anti-fraud, informasi tersebut tidak cukup akurat.

Hadirnya Intersection Observer v2

Untuk menjawab masalah tersebut, browser memperkenalkan Intersection Observer v2.

Versi ini menambahkan kemampuan untuk melakukan pengecekan visibilitas yang lebih nyata melalui opsi trackVisibility dan properti isVisible.

const observer = new IntersectionObserver(callback, {
  trackVisibility: true,
  delay: 100,
});

Dengan fitur ini, browser tidak hanya memeriksa apakah elemen berada di viewport, tetapi juga mencoba memastikan apakah elemen tersebut benar-benar dapat dilihat oleh pengguna.

Jika elemen tertutup oleh komponen lain, memiliki opacity yang sangat rendah, atau dimanipulasi menggunakan transform tertentu, maka browser dapat menganggap elemen tersebut tidak visible.

Studi Kasus: Impression Iklan

Misalkan Anda membangun portal berita yang menampilkan iklan dari advertiser.

Menggunakan Intersection Observer v1, impression iklan akan dihitung ketika banner masuk viewport. Masalahnya, pengguna mungkin tidak pernah benar-benar melihat iklan tersebut karena tertutup popup atau elemen lain.

Dengan Intersection Observer v2, impression baru dapat dihitung ketika browser yakin bahwa iklan benar-benar terlihat oleh pengguna. Hasilnya, data analytics menjadi lebih akurat dan lebih sulit dimanipulasi.

Inilah alasan utama mengapa Intersection Observer v2 banyak dibahas di dunia advertising technology dan web analytics.

Hal yang Perlu Diperhatikan

Meskipun terdengar lebih canggih, bukan berarti v2 selalu menjadi pilihan terbaik.

Ada beberapa keterbatasan yang perlu dipahami:

Perhitungan visibilitas lebih kompleks sehingga biaya performanya
lebih tinggi dibanding v1.

Penggunaan trackVisibility mewajibkan adanya delay minimal 100ms untuk mengurangi overhead.

Dukungan browser belum seluas Intersection Observer v1.

Browser sengaja menggunakan pendekatan konservatif sehingga terkadang menghasilkan false negative, yaitu elemen sebenarnya terlihat tetapi dianggap tidak visible.

Karena alasan tersebut, sebagian besar aplikasi web masih akan menggunakan v1 untuk kebutuhan sehari-hari.

Kesimpulan

Jika kebutuhan Anda hanya sebatas lazy loading, infinite scroll, animasi saat scroll, atau mendeteksi kemunculan komponen di layar, maka Intersection Observer v1 sudah lebih dari cukup dan menawarkan performa yang sangat baik.

Tujuan Penggunaan	Feedback	Apa yang seharusnya digunakan
Infinite scroll < 200 items	Perfect	Stick with Intersection Observer
Infinite scroll with > 1,000 items	Bad (Bloats the DOM)	Virtualization (e.g., TanStack Virtual)
Pixel-perfect Parallax / Scroll Animations	Bad (Too choppy/threshold-based)	`requestAnimationFrame` + Scroll Event
Detecting if an element resized	Incorrect tool	`ResizeObserver`
*Checking if an ad is actually* visible**	Flawed (Tricked by overlays)	Intersection Observer v2 (`trackVisibility`)

Namun jika Anda bekerja pada sistem yang membutuhkan validasi visibilitas secara lebih akurat, seperti ad tracking, impression analytics, atau anti-clickjacking, maka Intersection Observer v2 menjadi pilihan yang lebih tepat.

Singkatnya, v1 menjawab pertanyaan "Apakah elemen berada di viewport?", sedangkan v2 mencoba menjawab pertanyaan yang lebih sulit: "Apakah elemen benar-benar terlihat oleh manusia?".

Source

DIAN.AFRIAL