JavaScript Academy · Ders

Öğe Görünürlüğünü Gözlemleme

Bir gözlemci oluşturun ve öğeleri izleyin.

Öğe Görünürlüğünü Gözlemleme, CoddyKit'te ücretsiz bir JavaScript 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Intersection Observer Neden Kullanılır

Geleneksel olarak, bir öğenin görünüm alanına girdiğini algılamak için scroll olayını dinlemek ve sürekli getBoundingClientRect çağırmak gerekirdi; bu yavaş ve takılmalı bir işlemdir.

Kesişim Gözlemleyicisi API'si, görünürlüğü ana iş parçacığı dışında verimli ve eşzamansız biçimde izler.

Gözlemleyici Oluşturma

new IntersectionObserver(callback) ile bir gözlemleyici oluşturursunuz. Geri çağırma işlevi, izlenen bir öğenin görünürlüğü bir eşiği her geçtiğinde çalışır.

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

Öğe İzleme

Bir hedefi izlemeye başlamak için observer.observe(element) çağrısını yapın. Tek bir gözlemleyici birçok öğeyi izleyebilir.

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

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

isIntersecting İşareti

Her girdide, hedefin şu anda root'la (varsayılan olarak görünüm alanıyla) örtüşüp örtüşmediğini bildiren bir boolean isIntersecting bulunur.

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

Girdi Ayrıntıları

Her IntersectionObserverEntry yararlı veriler taşır:

target — izlenen öğe
isIntersecting — root ile kesişip kesişmediği
intersectionRatio — ne kadarının görünür olduğu (0 ile 1 arasında)
boundingClientRect — hedefin dikdörtgeni

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

threshold Seçeneği

threshold seçeneği, geri çağırımın hangi görünürlük oranlarında tetikleneceğini belirler. 0, tek bir piksel görünür görünmez tetiklenir; 1 ise yalnızca tamamen görünür olduğunda tetiklenir.

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]

root Seçeneği

Varsayılan olarak observer, ölçümü tarayıcının görünüm alanına göre yapar. Bunun yerine, görünürlüğü bu kapsayıcı içinde ölçmek için root değerini kaydırılabilir bir üst öğeye ayarlayın.

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

rootMargin Seçeneği

rootMargin, CSS kenar boşluklarına benzer şekilde root'un sınırlayıcı kutusunu büyütür veya küçültür. Pozitif değerler geri çağırımı daha erken, yani öğe gerçekten ekranda görünmeden önce tetikler.

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

Gözlemi Durdurma

Tek bir öğeyi izlemeyi durdurmak için observer.unobserve(element), tüm öğeleri izlemeyi durdurmak için observer.disconnect() çağrısını yapın. Bu işlem, temizleme ve tek seferlik tetiklemeler için önemlidir.

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

Neden Verimlidir

Tarayıcı, her kaydırma karesinde JavaScript çalıştırmak yerine kesişimleri kendi içinde hesaplar ve bildirimleri toplu olarak gönderir. Böylece düzenin tekrar tekrar hesaplanması önlenir ve çok sayıda hedef olsa bile kaydırma akıcı kalır.

Yaygın Kullanım Alanları

IntersectionObserver, gerçek hayattaki birçok özelliğin temelini oluşturur:

Görsellerin ve iç çerçevelerin gecikmeli yüklenmesi
Sonsuz kaydırma
Kaydırmayla tetiklenen animasyonlar
Reklam veya içerik gösterimlerinin izlenmesi

Sırada bunlardan birkaçını oluşturacağız.

Hızlı Kontrol

IntersectionObserver temellerini ne kadar anladığınızı ölçün.

Özet

IntersectionObserver temellerini öğrendiniz:

new IntersectionObserver(callback, options) bir tane oluşturur.
observe izlemeyi başlatır; unobserve/disconnect ise durdurur.
Her giriş, isIntersecting ve intersectionRatio özelliklerini sunar.
threshold, root ve rootMargin, ne zaman tetikleneceğini ayarlar.
Kaydırma dinleyicilerinden çok daha verimlidir.

Sırada bununla görselleri gecikmeli olarak yükleyeceğiz.

Sıkça Sorulan Sorular

“Öğe Görünürlüğünü Gözlemleme” dersi ücretsiz mi?

Evet — “Öğe Görünürlüğünü Gözlemleme” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Öğe Görünürlüğünü Gözlemleme” dersinde ne öğreneceğim?

Bir gözlemci oluşturun ve öğeleri izleyin. JavaScript 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.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript 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.

“Öğe Görünürlüğünü Gözlemleme” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript 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

← JavaScript Academy Sayfasına Dön