Pelajari tentang prinsip dan kepraktisan gulungan tak terbatas.

Pengguliran tak terbatas memungkinkan konten dimuat terus-menerus saat pengguna berpindah ke bawah halaman, tidak seperti metode klik untuk memuat pagination tradisional. Fitur ini dapat menawarkan pengalaman yang lebih lancar, terutama pada perangkat seluler.

Temukan cara menyiapkan gulir tak terbatas menggunakan HTML biasa, CSS, dan JavaScript.

Menyiapkan Bagian Depan

Mulailah dengan struktur HTML dasar untuk menampilkan konten Anda. Berikut ini contohnya:

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>

Halaman ini berisi serangkaian gambar placeholder dan referensi dua sumber: file CSS dan file JavaScript.

Gaya CSS untuk Konten yang Dapat Digulir

Untuk menampilkan gambar placeholder dalam kotak, tambahkan CSS berikut ke file gaya.css mengajukan:

* {
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%);
}

Saat ini, halaman Anda akan terlihat seperti ini:

Implementasi Inti Dengan JS

Sunting skrip.js. Untuk menerapkan pengguliran tak terbatas, Anda perlu mendeteksi kapan pengguna telah menggulir di dekat bagian bawah penampung konten atau halaman.

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

Lalu, buat fungsi untuk mengambil lebih banyak data placeholder.

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");
 }
}

Untuk proyek ini, Anda dapat menggunakan API dari toko palsu.

Untuk mengonfirmasi bahwa data Anda diambil saat digulir, lihat konsol:

Anda akan melihat data Anda diambil beberapa kali saat di-scroll yang dapat menjadi faktor yang mengganggu kinerja perangkat. Untuk mencegah hal ini, buat status pengambilan data awal:

let isFetching = false;

Kemudian, ubah fungsi pengambilan Anda agar hanya mengambil data setelah pengambilan sebelumnya selesai.

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
 }
}

Menampilkan Konten Baru

Untuk menampilkan konten baru saat pengguna menggulir halaman ke bawah, buat fungsi yang menambahkan gambar ke penampung induk.

Pertama, pilih elemen induk:

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

Kemudian, buat fungsi untuk menambahkan konten.

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
 });
}

Terakhir, ubah fungsi pengambilan Anda dan teruskan data yang diambil ke fungsi append.

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;
 }
}

Dan dengan itu, gulungan tak terbatas Anda sekarang berfungsi.

Untuk meningkatkan pengalaman pengguna, Anda dapat menampilkan indikator pemuatan saat mengambil konten baru. Mulailah dengan menambahkan HTML ini.

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

Kemudian pilih elemen pemuatan.

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

Terakhir, buat dua fungsi untuk mengubah visibilitas indikator pemuatan.

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

Kemudian, tambahkan mereka ke fungsi pengambilan.

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;
 }
}

Yang memberikan:

Beberapa praktik terbaik yang harus diikuti meliputi:

  • Jangan mengambil terlalu banyak item secara bersamaan. Hal ini dapat membebani browser dan menurunkan kinerja.
  • Daripada mengambil konten segera setelah mendeteksi peristiwa gulir, gunakan fungsi debounce untuk menunda pengambilan sedikit. Ini bisa mencegah permintaan jaringan yang berlebihan.
  • Tidak semua pengguna menyukai pengguliran tanpa batas. Tawarkan opsi untuk menggunakan komponen pagination Jika diinginkan.
  • Jika tidak ada lagi konten yang perlu dimuat, beri tahu pengguna daripada terus mencoba mengambil lebih banyak konten.

Menguasai Pemuatan Konten yang Mulus

Pengguliran tanpa batas memungkinkan pengguna menelusuri konten dengan lancar, dan ini bagus untuk orang yang menggunakan perangkat seluler. Jika Anda menggunakan tips dan saran penting dari artikel ini, Anda dapat menambahkan fitur ini ke situs web Anda.

Ingatlah untuk memikirkan bagaimana perasaan pengguna saat mereka menggunakan situs Anda. Tampilkan hal-hal seperti tanda kemajuan dan catatan kesalahan untuk memastikan pengguna mengetahui apa yang terjadi.