Sonsuz kaydırmanın ilkeleri ve pratiklikleri hakkında bilgi edinin.

Sonsuz kaydırma, geleneksel sayfalandırmanın tıklatarak yükleme yönteminden farklı olarak, kullanıcılar sayfada aşağı doğru ilerledikçe içeriğin sürekli olarak yüklenmesini sağlar. Bu özellik özellikle mobil cihazlarda daha sorunsuz bir deneyim sunabilir.

Düz HTML, CSS ve JavaScript kullanarak sonsuz kaydırmayı nasıl ayarlayacağınızı keşfedin.

Ön Uç Kurulumu

İçeriğinizi görüntülemek için temel bir HTML yapısıyla başlayın. İşte bir örnek:

html>
<html>
<head>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<h1>Infinite Scroll Pageh1>
<divclass="products__list">
<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />







instagram viewer



<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />
div>
<scriptsrc="script.js">script>
body>
html>

Bu sayfa bir dizi yer tutucu resim içerir ve iki kaynağa referans verir: bir CSS dosyası ve bir JavaScript dosyası.

Kaydırılabilir İçerik için CSS Şekillendirme

Yer tutucu görselleri bir ızgarada görüntülemek için aşağıdaki CSS'yi CSS'nize ekleyin: stil.css dosya:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }


body {
font-family: Cambria, Times, "TimesNewRoman", serif;
}


h1 {
text-align: center;
font-size: 5rem;
padding: 2rem;
}


img {
width: 100%;
display: block;
}


.products__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}


.products__list > * {
width: calc(33% - 2rem);
}


.loading-indicator {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
background: #333;
padding: 1rem 2rem;
color: #fff;
border-radius: 10px;
transform: translateX(-50%);
}

Şu anda sayfanız şöyle görünmeli:

JS ile Temel Uygulama

Düzenlemek script.js. Sonsuz kaydırmayı uygulamak için kullanıcının içerik kabının veya sayfanın alt kısmına yakın bir yerde kaydırma yaptığını tespit etmeniz gerekir.

"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
 ) {
// User is near the bottom, fetch more content
 fetchMoreContent();
 }
});

Ardından daha fazla yer tutucu veri getirecek bir işlev oluşturun.

asyncfunctionfetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");
if (!response.ok) {
thrownewError("Network response was not ok");
 }


let data = await response.json();
console.log(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 }
}

Bu proje için API'yi şuradan kullanabilirsiniz: sahtestoreapi.

Verilerinizin kaydırılarak getirildiğini doğrulamak için konsola bir göz atın:

Verilerinizin kaydırma sırasında birden çok kez getirildiğini fark edeceksiniz; bu, cihazın performansına zarar veren bir faktör olabilir. Bunu önlemek için verilerin ilk getirilme durumunu oluşturun:

let isFetching = false;

Ardından, getirme işlevinizi yalnızca önceki bir getirme işlemi tamamlandıktan sonra veri getirecek şekilde değiştirin.

asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetching
 isFetching = true; // Set the flag to true


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }
let data = await response.json();
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 isFetching = false; // Reset the flag to false
 }
}

Yeni İçeriğin Görüntülenmesi

Kullanıcı sayfayı aşağı kaydırdığında yeni içeriği görüntülemek için görüntüleri ana kaba ekleyen bir işlev oluşturun.

İlk önce ana öğeyi seçin:

const productsList = document.querySelector(".products__list");

Ardından içerik eklemek için bir işlev oluşturun.

functiondisplayNewContent(data) {
 data.forEach((item) => {
const imgElement = document.createElement("img");
 imgElement.src = item.image;
 imgElement.alt = item.title;
 productsList.appendChild(imgElement); // Append to productsList container
 });
}

Son olarak, getirme işlevinizi değiştirin ve getirilen verileri ekleme işlevine iletin.

asyncfunctionfetchMoreContent() {
if (isFetching) return;
 isFetching = true;


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }


let data = await response.json();
 displayNewContent(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 isFetching = false;
 }
}

Ve bununla birlikte sonsuz kaydırmanız artık çalışıyor.

Kullanıcı deneyimini geliştirmek için yeni içerik getirirken bir yükleme göstergesi görüntüleyebilirsiniz. Bu HTML'yi ekleyerek başlayın.

<h1class="loading-indicator">Loading...h1>

Ardından yükleme öğesini seçin.

const loadingIndicator = document.querySelector(".loading-indicator");

Son olarak yükleme göstergesinin görünürlüğünü değiştirmek için iki işlev oluşturun.

functionshowLoadingIndicator() {
 loadingIndicator.style.display = "block";
console.log("Loading...");
}
functionhideLoadingIndicator() {
 loadingIndicator.style.display = "none";
console.log("Finished loading.");
}

Daha sonra bunları getirme işlevine ekleyin.

asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetching
 isFetching = true;
 showLoadingIndicator(); // Show loader


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }
let data = await response.json();
 displayNewContent(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 hideLoadingIndicator(); // Hide loader
 isFetching = false;
 }
}

Hangisi verir:

İzlenecek en iyi uygulamalardan bazıları şunlardır:

  • Aynı anda çok fazla öğe getirmeyin. Bu, tarayıcıyı zorlayabilir ve performansı düşürebilir.
  • Bir kaydırma olayının algılanması üzerine içeriği hemen getirmek yerine, geri dönme işlevini kullanın getirmeyi biraz geciktirmek için. Bu olabilir aşırı ağ isteklerini önleme.
  • Tüm kullanıcılar sonsuz kaydırmayı tercih etmez. Şuna bir seçenek sun: sayfalandırma bileşeni kullanın arzu edildiği takdirde.
  • Yüklenecek başka içerik yoksa sürekli olarak daha fazla içerik getirmeye çalışmak yerine kullanıcıyı bilgilendirin.

Sorunsuz İçerik Yüklemede Uzmanlaşma

Sonsuz kaydırma, kullanıcıların içeriğe sorunsuz bir şekilde göz atmasına olanak tanır ve mobil cihaz kullanan kişiler için harikadır. Bu makaledeki ipuçlarını ve önemli tavsiyeleri kullanırsanız bu özelliği web sitelerinize ekleyebilirsiniz.

Kullanıcıların sitenizi kullanırken nasıl hissettiklerini düşünmeyi unutmayın. Kullanıcının neler olduğunu bildiğinden emin olmak için ilerleme işaretleri ve hata notları gibi şeyleri gösterin.