Intersection Observer

1 min read


Historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish.

Ini penjelasan yang mantab banget ya untuk dipahami : Intersection Observer API – Web APIs | MDN (mozilla.org)

Kadang saat kita membangun suatu program, dari program tersebut membutuhkan interaksi yang bagus dan menampilkan interface kepada user. Sehingga interface harus mengindikasikan suatu kondisi yang bersifat informatif kepada si user. Sehingga akan membentuk experience yang baik dari sisi user tersebut.

Contoh sederhana, bagaiman meninformasikan user kalau si user sedang aktif pada halaman dan sesi tertentu hanya dengan user scroll ke sesi tersebut pada suatu website. Tentu ini sangat bagus jika berhasil diterapkan karena akan meningkatkan kualitas dari interface aplikasi kita.

Memberikan ID atau ref pada setiap sesi akan menjadi indikatornya

Pada case yang saya alami yakni mengguakan ReactJS, jadi programnya harus mendeteksi apakah sesi tersebut tampil pada layar si user, jika iya maka ditampilkan content A jika tidak maka tampilkan content yang lainnya.

Link useRef: Intersection Observer using React – DEV Community

Okay cukup sekian dulu ya cyaaaa….

Bima Sena

Leave a Reply

Your email address will not be published. Required fields are marked *