IntersectionObserver API dan Ambang Batas
Buat observer dan konfigurasikan ambang visibilitas.
IntersectionObserver API dan Ambang Batas adalah pelajaran HTML 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 HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Fungsi IntersectionObserver
IntersectionObserver memicu fungsi panggilan balik saat elemen memasuki atau meninggalkan area pandang (atau wadah gulir lainnya). Ini merupakan alternatif modern dan berperforma tinggi untuk pendengar gulir—peramban yang melakukan perhitungannya, sementara kode Anda hanya berjalan saat terjadi perubahan keterlihatan.
Pembuatan
new IntersectionObserver(callback, options) membuat pengamat. Fungsi panggilan balik menerima array entry saat persinggungan berubah; opsi menentukan wadah yang diamati dan ambang yang digunakan.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
console.log("Visible:", entry.target);
}
}
});
observer.observe(document.querySelector(".hero"));IntersectionObserverEntry
Setiap entry memiliki target (elemen yang diamati), isIntersecting (nilai benar/salah), intersectionRatio (0 hingga 1), boundingClientRect, intersectionRect, dan waktu. Gunakan isIntersecting untuk pemeriksaan keterlihatan biner; gunakan intersectionRatio untuk logika berdasarkan persentase keterlihatan.
Opsi ambang
{ threshold: 0.5 } memicu fungsi panggilan balik setiap kali rasio persinggungan melewati 50%. Gunakan array [0, 0.25, 0.5, 0.75, 1] untuk memicunya pada setiap seperempat—berguna untuk membuat indikator kemajuan atau analitik yang melaporkan "% terlihat".
Opsi akar
Secara bawaan, pengamat mengukur persinggungan dengan area pandang. Tetapkan root: someScrollableDiv untuk mengukurnya terhadap wadah gulir bagian dalam—misalnya, daftar tervirtualisasi di dalam div dengan tinggi tetap.
Opsi rootMargin
rootMargin: "200px" memperbesar area pengamatan sebesar 200 piksel di setiap sisi. Gunakan ini untuk memicu lebih awal (mulai memuat gambar 200 piksel sebelum gambar memasuki area pandang) atau lebih lambat (hanya memicu saat elemen sepenuhnya melewati area pandang).
new IntersectionObserver(callback, {
rootMargin: "0px 0px 200px 0px",
threshold: 0
});observe dan unobserve
observer.observe(element) mulai mengamati elemen; observer.unobserve(element) menghentikan pengamatannya. Selalu gunakan unobserve saat fungsi panggilan balik tidak lagi diperlukan (misalnya, setelah pemuatan tertunda dipicu sekali) untuk membebaskan memori.
Menghentikan Pengamatan
observer.disconnect() menghentikan pengamatan terhadap semua elemen yang diamati. Panggil saat komponen dilepas atau pengamat tidak lagi diperlukan—hal ini mencegah kebocoran dari observer yang tetap hidup setelah tidak lagi digunakan.
Pengiriman Asinkron
Fungsi panggilan balik dikirim secara asinkron dan dikumpulkan dalam kelompok—banyak perubahan persinggungan selama gulir cepat memicu satu fungsi panggilan balik dengan semua entry, bukan satu untuk setiap elemen. Ini memberikan peningkatan performa besar dibandingkan pendengar gulir yang dipicu pada setiap peristiwa gulir.
Fungsi Panggilan Balik Awal Dipicu Segera
Saat Anda mulai mengamati elemen baru, fungsi panggilan balik hampir segera dipicu sekali dengan keadaan saat ini—berguna untuk menangani elemen yang sudah terlihat ketika pengamatan dimulai, tanpa jalur inisialisasi khusus.
Kasus Penggunaan Umum
Pemuatan gambar secara tertunda, pemicuan animasi saat elemen digulir hingga terlihat, gulir tanpa akhir (mengamati sentinel di dekat akhir daftar), pelacakan artikel yang benar-benar telah dibaca pengguna, dan pengubahan header tetap berdasarkan keterlihatan bagian utama.
Uji Pengetahuan
Apa perbedaan antara ambang: 0 dan ambang: 1 dalam sebuah IntersectionObserver?
Ringkasan
IntersectionObserver memicu fungsi panggilan balik saat keterlihatan elemen berubah, dengan performa dan pengelompokan bawaan—gunakan ini sebagai pengganti pendengar gulir untuk logika keterlihatan. Konfigurasikan dengan ambang (0 hingga 1, atau array), elemen akar (wadah gulir khusus), dan rootMargin (memperbesar atau memperkecil area yang diamati). Gunakan observe/unobserve pada elemen tertentu; hentikan seluruh pengamatan untuk membersihkan semuanya.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “IntersectionObserver API dan Ambang Batas” gratis?
Ya — teks lengkap “IntersectionObserver API dan Ambang Batas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “IntersectionObserver API dan Ambang Batas”?
Buat observer dan konfigurasikan ambang visibilitas. Kamu berlatih HTML 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 HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML 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 “IntersectionObserver API dan Ambang Batas” 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 HTML Academy ini?
Ya. Setiap pelajaran HTML 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
- IntersectionObserver API dan Ambang Batas
- Pemuatan Malas dengan IntersectionObserver
- Implementasi Gulir Tanpa Akhir
- Menyiapkan Animasi yang Terhubung dengan Guliran