IntersectionObserver API ve Eşikler
Gözlemciler oluşturun ve görünürlük eşiklerini yapılandırın
IntersectionObserver API ve Eşikler, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
IntersectionObserver Ne Yapar
IntersectionObserver, bir öge görünüm alanına (veya başka bir kaydırma kapsayıcısına) girdiğinde ya da oradan çıktığında geri çağırma işlevlerini çalıştırır. Kaydırma dinleyicilerine kıyasla çağdaş ve verimli bir alternatiftir — hesabı tarayıcı yapar, kodunuz yalnızca gerçek görünürlük geçişlerinde çalışır.
Oluşturma
new IntersectionObserver(callback, options) bir gözlemci oluşturur. Kesişimler değiştiğinde geri çağırma işlevi bir dizi giriş alır; seçenekler hangi kapsayıcının ve hangi eşiklerde gözlemleneceğini denetler.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
console.log("Visible:", entry.target);
}
}
});
observer.observe(document.querySelector(".hero"));IntersectionObserverEntry
Her girişte target (gözlemlenen öge), isIntersecting (boolean), intersectionRatio (0 ile 1 arasında), boundingClientRect, intersectionRect ve time bulunur. İkili görünürlük denetimleri için isIntersecting, yüzde görünürlüğe dayalı mantık için intersectionRatio kullanınız.
threshold Seçeneği
{ threshold: 0.5 }, kesişim oranı %50'yi her geçtiğinde geri çağırma işlevini çalıştırır. Her çeyrekte bir çalıştırmak için [0, 0.25, 0.5, 0.75, 1] dizisini kullanınız — bu, ilerleme göstergeleri veya "% görünür" bilgisini bildiren analizler oluşturmak için kullanışlıdır.
root Seçeneği
Varsayılan olarak gözlemci, görünüm alanıyla olan kesişimi ölçer. İçteki bir kaydırma kapsayıcısına göre ölçüm yapmak için root: someScrollableDiv ayarlayınız — örneğin, sabit yükseklikteki bir div'in içindeki sanallaştırılmış bir listeyi ölçmek için.
rootMargin Seçeneği
rootMargin: "200px", gözlem alanını her yönde 200 piksel genişletir. Daha erken çalıştırmak (görseller görünüm alanına girmeden 200 piksel önce yüklemeye başlamak) veya daha geç çalıştırmak (yalnızca görünüm alanını tamamen geçtiklerinde çalıştırmak) için kullanınız.
new IntersectionObserver(callback, {
rootMargin: "0px 0px 200px 0px",
threshold: 0
});observe ve unobserve
observer.observe(element) bir ögeyi izlemeye başlar; observer.unobserve(element) ise izlemeyi durdurur. Geri çağırma işlevine artık ihtiyaç kalmadığında (örneğin, tembel yükleme bir kez tetiklendikten sonra) belleği serbest bırakmak için her zaman unobserve kullanınız.
Bağlantıyı Kesme
observer.disconnect(), gözlemlenen tüm ögelerin izlenmesini durdurur. Bileşen kaldırıldığında veya gözlemciye artık ihtiyaç kalmadığında çağırınız — kullanım amacından daha uzun süre yaşayan gözlemcilerin sızıntılara yol açmasını önler.
Asenkron İletim
Geri çağırma işlevleri asenkron olarak ve toplu hâlde iletilir — hızlı bir kaydırma sırasında gerçekleşen birçok kesişim değişikliği, öge başına bir geri çağırma yerine tüm girişleri içeren tek bir geri çağırma işlevini çalıştırır. Bu, her kaydırma olayında çalışan kaydırma dinleyicilerine göre büyük bir performans kazanımıdır.
İlk Geri Çağırma Hemen Çalışır
Yeni bir ögeyi gözlemlemeye başladığınızda geri çağırma işlevi, geçerli durumla birlikte neredeyse hemen bir kez çalışır — bu sayede gözlem başladığında zaten görünür olan ögeleri özel bir başlatma yolu olmadan işleyebilirsiniz.
Yaygın Kullanım Alanları
Görselleri tembel olarak yükleme, görünüm alanına kaydırıldığında animasyonları tetikleme, sonsuz kaydırma (listenin sonuna yakın bir sentinel gözlemleme), kullanıcının gerçekten okuduğu makaleleri izleme ve hero görünürlüğüne göre sabit üst bilginin açılıp kapanması.
Bilgi Kontrolü
Bir IntersectionObserver içinde eşik: 0 ile eşik: 1 arasındaki fark nedir?
Özet
IntersectionObserver, yerleşik performans ve toplu işleme sayesinde öge görünürlüğü geçişlerinde geri çağırma işlevlerini çalıştırır — görünürlük mantığı için kaydırma dinleyicilerini bununla değiştiriniz. threshold (0 ile 1 arasında veya dizi), kök (özel kaydırma kapsayıcısı) ve rootMargin (gözlemlenen alanı büyütme/küçültme) ile yapılandırınız. Belirli ögeler için observe/unobserve kullanınız; bağlantıyı kesme işlemi her şeyi temizler.
Sıkça Sorulan Sorular
“IntersectionObserver API ve Eşikler” dersi ücretsiz mi?
Evet — “IntersectionObserver API ve Eşikler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“IntersectionObserver API ve Eşikler” dersinde ne öğreneceğim?
Gözlemciler oluşturun ve görünürlük eşiklerini yapılandırın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“IntersectionObserver API ve Eşikler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- IntersectionObserver API ve Eşikler
- IntersectionObserver ile Tembel Yükleme
- Sonsuz Kaydırma Uygulaması
- Kaydırmayla Bağlantılı Animasyonları Ayarlama