JavaScript Academy · Pelajaran

Mengamati Visibilitas Elemen

Buat observer dan pantau elemen.

Mengamati Visibilitas Elemen adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Mengapa Pengamat Persinggungan

Secara tradisional, mendeteksi saat elemen memasuki area pandang berarti mendengarkan scroll dan terus-menerus memanggil getBoundingClientRect, yang lambat dan menyebabkan tampilan tersendat-sendat.

API Pengamat Persinggungan mengawasi visibilitas secara efisien dan asinkron, di luar utas utama.

Membuat Pengamat

Anda membuat pengamat dengan new IntersectionObserver(callback). Panggilan balik tersebut berjalan setiap kali visibilitas elemen yang diamati melewati suatu ambang batas.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

Mengamati Elemen

Panggil observer.observe(element) untuk mulai mengawasi sebuah sasaran. Satu pengamat dapat mengawasi banyak elemen.

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

Penanda isIntersecting

Setiap entri memiliki nilai boolean isIntersecting yang memberi tahu apakah sasaran saat ini bertumpang tindih dengan root (secara bawaan, area pandang).

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

Detail Entri

Setiap IntersectionObserverEntry membawa data yang berguna:

target — elemen yang diamati
isIntersecting — apakah elemen tersebut melintasi root
intersectionRatio — seberapa banyak yang terlihat (0 hingga 1)
boundingClientRect — persegi panjang sasaran

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

Opsi ambang batas

Opsi threshold menentukan pada rasio visibilitas berapa fungsi panggil balik dijalankan. 0 dijalankan segera setelah satu piksel terlihat; 1 hanya dijalankan saat elemen terlihat sepenuhnya.

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

Opsi akar

Secara bawaan, observer mengukur terhadap area tampilan peramban. Atur root ke elemen leluhur yang dapat digulir untuk mengukur visibilitas di dalam wadah tersebut.

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

Opsi rootMargin

rootMargin memperbesar atau memperkecil kotak pembatas akar, seperti margin CSS. Nilai positif menjalankan fungsi panggil balik lebih awal, sebelum elemen benar-benar berada di layar.

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

Menghentikan Pengamatan

Panggil observer.unobserve(element) untuk berhenti mengawasi satu elemen, atau observer.disconnect() untuk berhenti mengawasi semuanya. Hal ini penting untuk pembersihan dan pemicu yang hanya berjalan sekali.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

Mengapa Ini Efisien

Peramban menghitung perpotongan secara internal dan mengelompokkan pemberitahuan, alih-alih menjalankan JavaScript Anda pada setiap bingkai pengguliran. Hal ini mencegah perubahan tata letak berulang dan menjaga pengguliran tetap mulus meskipun ada banyak sasaran.

Kasus Penggunaan Umum

IntersectionObserver mendukung banyak fitur di dunia nyata:

Pemuatan tertunda gambar dan bingkai sebaris
Pengguliran tanpa akhir
Animasi yang dipicu pengguliran
Pelacakan tayangan iklan atau konten

Kita akan membuat beberapa di antaranya berikutnya.

Pemeriksaan Singkat

Uji pemahaman Anda tentang dasar-dasar IntersectionObserver.

Ringkasan

Anda telah mempelajari dasar-dasar IntersectionObserver:

new IntersectionObserver(callback, options) membuatnya.
observe memulai pengawasan; unobserve/disconnect menghentikannya.
Setiap entri menyediakan isIntersecting dan intersectionRatio.
threshold, root, dan rootMargin mengatur kapan fungsi tersebut dijalankan.
Fitur ini jauh lebih efisien daripada pendengar pengguliran.

Berikutnya, kita akan memuat gambar secara tertunda dengannya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengamati Visibilitas Elemen” gratis?

Ya — teks lengkap “Mengamati Visibilitas Elemen” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengamati Visibilitas Elemen”?

Buat observer dan pantau elemen. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Mengamati Visibilitas Elemen” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy