HTML Academy · Ders

Sonsuz Kaydırma Uygulaması

Kullanıcı kaydırdıkça daha fazla içeriği otomatik olarak yükleyin

Sonsuz Kaydırma Uygulaması, CoddyKit'te ücretsiz bir HTML 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, 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.

Kalıp

Sonsuz kaydırma, kullanıcı listenin sonuna yaklaştıkça daha fazla içerik yükler. En temiz uygulama IntersectionObserver kullanır: listenin sonuna bir "sentinel" ögesi yerleştiriniz ve bunu gözlemleyiniz. sentinel görünüm alanına girdiğinde sonraki sayfayı fetchPage ile alınız.

Sentinel Ögesi

Son liste ögesinden sonra görünmez bir <div> (veya bir "yükleniyor..." yer tutucusu) ekleyiniz. Bunu IntersectionObserver ile gözlemleyiniz. Kesiştiğinde bu, kullanıcının listenin sonuna yaklaştığını gösterir — daha fazlasını alma zamanı gelmiştir.

<ul id="feed">
  <li>Post 1</li>
  <li>Post 2</li>
</ul>
<div id="sentinel" aria-hidden="true"></div>

Gözlemci Döngüsü

Kesişimde sonraki sayfayı alınız, yeni ögeleri oluşturunuz ve sentinel'i yeniden konumlandırınız (ögeleri bunun önüne eklerseniz sentinel otomatik olarak listenin sonunda kalır). unobserve ve observe işlemlerini yeniden yapmanız gerekmez — sentinel hâlâ gözlemlenmektedir.

const sentinel = document.getElementById("sentinel");
const feed = document.getElementById("feed");
let page = 1;
let loading = false;
const observer = new IntersectionObserver(async (entries) => {
  if (!entries[0].isIntersecting || loading) return;
  loading = true;
  const items = await fetchPage(page++);
  items.forEach((it) => feed.insertAdjacentHTML("beforeend", renderItem(it)));
  loading = false;
});
observer.observe(sentinel);

Yükleme Durumu Koruması

Bir boolean loading işareti, ilk yanıt gelmeden önce kullanıcı hızlı kaydırıp birden çok kesişimi tetiklediğinde isteklerin üst üste binmesini önler. Bu işaret olmadan aynı sayfa tekrar tekrar alınır ve ögeler yinelenmiş görünür.

Verilerin Sonu

Sunucu boş bir sayfa döndürdüğünde (veya "başka veri yok" sinyali verdiğinde) sentinel için unobserve kullanınız ve bunu liste sonu mesajıyla değiştiriniz. Gelecekteki kesişimler veri alma işlemlerini tetiklemez; kullanıcı sona ulaştığını görür.

Hata İşleme

Veri alma işlemini bir hata yakalama bloğuna alınız. Hata durumunda loading = true bırakınız; böylece yeniden denemeler kendiliğinden çalışmaz. Yüklemeyi sıfırlayıp yeniden yüklemeyi tetikleyen bir "Yeniden Dene" düğmesi gösteriniz. Aksi hâlde ağ hataları yeniden deneme fırtınalarına yol açar.

Hevesli Yükleme İçin rootMargin

rootMargin: "500px", kullanıcı sentinel'e ulaşmadan 500 piksel önce sonraki veri alma işlemini başlatır. Bunu öge yüksekliğine ve ortalama kaydırma hızına göre ayarlayınız — çok küçük olursa kullanıcılar "henüz içerik yok" durumuna ulaşır; çok büyük olursa gereğinden önce veri alırsınız.

Kaydırma Konumunu Geri Yükleme

Kullanıcı başka bir yere gidip geri döndüğünde kaydırma konumu korunmalı AND daha önce yüklenen ögeler yeniden oluşturulmalıdır. Ögeleri sessionStorage'a veya Zustand tarzı bir depoya önbelleğe alınız; bileşen bağlandığında geri yükleyiniz ve hatırlanan uzaklığa scrollTo uygulayınız.

Bellek Değerlendirmeleri

Uzun sonsuz kaydırmalar binlerce DOM düğümü biriktirir. Çok uzun akışlarda (Twitter ve Facebook) pencerelemeyi birleştiriniz: görünüm alanının üzerindeki ögeleri DOM'dan kaldırınız, yukarı kaydırıldığında geri yükleyiniz. react-virtual ve @tanstack/virtual gibi kitaplıklar bunu verimli bir şekilde yönetir.

Erişilebilirlik

Sonsuz kaydırma, alt bilgiye kolayca ulaşamayan klavye ve ekran okuyucu kullanıcıları için elverişsizdir. Geri dönüş olarak alternatif bir "Daha fazla yükle" düğmesi sağlayınız ve sayfanın Home/End tuşlarıyla erişilebilen gerçek bir alt bilgisi olduğundan emin olunuz. Yeni ögeleri bildiren bir Aria-live bölgesi de yardımcı olur.

Mobil Sekmeli Kaydırma

iOS'taki sekmeli kaydırma, sona yakın birden çok kesişim tetikleyebilir. Yükleme koruması çoğu durumu ele alır; sekme sırasında oluşan kesişim patlamasını filtrelemek için 300 ms süreyle ek bir geciktirme de uygulamak isteyebilirsiniz.

Alternatif: İmleç Tabanlı Sayfalama

Sunucu API'leri, istemcinin izlediği sayfa numaralarına güvenmek yerine bir "sonraki imleç" döndürmelidir — bu, kaydırma sırasında ögeler eklense veya silinse bile sağlam kalır. İstemci her istekte imleci gönderir ve sunucu imleç döndürmeyi bıraktığında durur.

Bilgi Kontrolü

Sonsuz kaydırma, listenin sonundaki bir işaretçi öğe üzerinde IntersectionObserver kullanır. Kesişim gerçekleştiğinde sonraki sayfayı getirin, görüntüleyin ve gözlemlemeye devam edin. Bir yükleme bayrağıyla koruma sağlayın; veri sonunu ve hataları uygun şekilde yönetin, önceden getirme mesafesi için rootMargin değerini ayarlayın. Klavye alternatifleri (Daha fazla yükle düğmesi) sunun ve çok uzun akışlar için pencerelemeyi değerlendirin.

Özet

Sıkça Sorulan Sorular

“Sonsuz Kaydırma Uygulaması” dersi ücretsiz mi?

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

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

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

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

← HTML Academy Sayfasına Dön