JavaScript Academy · Ders

Sonsuz Kaydırma

Kullanıcı kaydırdıkça daha fazla içerik yükleyin.

Sonsuz Kaydırma, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. 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.

Sonsuz Kaydırma Nedir

Sonsuz kaydırma, Sonraki page düğmesine tıklamayı gerektirmek yerine kullanıcı listenin altına yaklaştıkça daha fazla içeriği otomatik olarak yükler. Sosyal feed'ler ve arama sonuçları bunu yaygın olarak kullanır.

sentinel Şablonu

En düzenli teknik, bir sentinel kullanır: listenin sonuna yerleştirilen boş bir öğe. sentinel görünüm alanına girdiğinde sonraki veri grubunu getirip listeye eklersiniz.

// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div>  <!-- trigger element -->

sentinel'ı İzleme

Bir IntersectionObserver'ı sentinel üzerinde kullanın. Son öğeden sonra bulunduğu için sentinel'ın görünür olması, kullanıcının listenin sonuna ulaştığı anlamına gelir.

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
  rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);

Yüklemeyi Tetikleme

Geri çağırımda isIntersecting değerini kontrol edin. Değer doğru olduğunda verilerin sonraki page bölümünü yükleyin.

function onIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}

page Takibini Yapma

Her yüklemenin sonraki veri bölümünü getirmesi için bir page sayacı tutun. Başarılı bir getirme işleminden sonra sayacı artırın.

let page = 1;

async function loadMoreItems() {
  const items = await fetchPage(page);
  appendItems(items);
  page++;
}

Çift Yüklemelere Karşı Koruma

Geri çağırım tekrar tekrar çalışabilir. Hâlihazırda devam eden bir getirme işlemi varken yenisinin başlamaması için loading bayrağını kullanın.

let loading = false;

async function loadMoreItems() {
  if (loading) return;
  loading = true;
  const items = await fetchPage(page);
  appendItems(items);
  page++;
  loading = false;
}

Yeni Öğeleri Ekleme

Getirilen öğeleri sentinel'ın önüne ekleyin; böylece sentinel büyüyen listenin en altında kalır ve sonraki yüklemeyi tetiklemeye hazır olur.

function appendItems(items) {
  const feed = document.getElementById('feed');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    feed.appendChild(li);
  });
}

Sona Ulaşıldığında Durdurma

Sunucu başka veri döndürmediğinde, yüklemeyi denemeyi bırakması için observer için disconnect çağrısını yapın. Böylece boş isteklerin durmadan gönderilmesi önlenir.

const items = await fetchPage(page);
if (items.length === 0) {
  observer.disconnect(); // no more data
  return;
}

rootMargin Neden Yardımcı Olur

Cömert bir rootMargin değeri (örneğin 200px), kullanıcı gerçekten alta ulaşmadan önce yüklemeyi başlatır. Böylece yeni öğeler görünür bir duraklama olmadan sorunsuzca ortaya çıkar.

new IntersectionObserver(onIntersect, {
  rootMargin: '300px' // begin loading well before the end
});

Erişilebilirlik Notları

Sonsuz kaydırma, klavye ve ekran okuyucusu kullanan kullanıcıları sıkıştırabilir ve alt bilgiyi gizleyebilir. Yedek olarak manuel bir Daha Fazla Yükle düğmesi sunmayı ve yeni içeriği ARIA canlı bölgeleriyle uygun bir şekilde duyurmayı düşünün.

Eksiksiz Akış

IntersectionObserver ile sonsuz kaydırma şu şekilde çalışır: bir sentinel yerleştirin, onu izleyin, göründüğünde verileri yükleyip ekleyin, yinelenen yüklemelere karşı koruma sağlayın ve veri tükendiğinde disconnect çağrısını yapın. Kaydırma hesaplamaları gerekmez.

Hızlı Kontrol

Sonsuz kaydırmayı ne kadar anladığınızı ölçün.

Özet

Sonsuz kaydırmayı oluşturdunuz:

Listenin sonuna bir sentinel öğesi yerleştirin.
Bu öğeyi bir IntersectionObserver ile izleyin.
Kesiştiğinde sonraki page'i getirin ve listeye ekleyin.
Yinelenen getirme işlemlerini önlemek için loading bayrağını kullanın.
Veri tükendiğinde bağlantıyı kesin.

Sırada kaydırmayla tetiklenen animasyonlar var.

Sıkça Sorulan Sorular

“Sonsuz Kaydırma” dersi ücretsiz mi?

Evet — “Sonsuz Kaydırma” 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.

“Sonsuz Kaydırma” dersinde ne öğreneceğim?

Kullanıcı kaydırdıkça daha fazla içerik yükleyin. 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 3. dersidir.

“Sonsuz Kaydırma” 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