htmlcssjavascriptscrollfeedMenengah10 mnt baca

Infinite Scroll

Membangun daftar yang memuat konten otomatis saat pengguna scroll ke bawah, seperti feed media sosial.

Kenapa Infinite Scroll?

Feed Instagram, TikTok, dan Twitter tidak punya tombol "halaman 2". Konten mengalir terus. Pola ini mengajarkan: deteksi posisi scroll, loading state, dan pagination tersembunyi.

Langkah Membangun

HTML: Kontainer feed dan elemen "penjaga" (<div id="penjaga">) di paling bawah berisi spinner loading.

CSS: Kartu-kartu feed dengan gambar dan teks. Spinner loading di bawah.

JS: Dua pendekatan:

  1. Scroll event: Cek jika scrollY + innerHeight >= scrollHeight - 200 (200px sebelum dasar), muat halaman berikutnya.
  2. IntersectionObserver (lebih baik): Amati elemen penjaga; saat terlihat, muat data.

Data simulasi: fungsi ambilHalaman(n) mengembalikan 10 item (atau fetch ke API picsum yang mendukung pagination). Guard sedangMuat mencegah request ganda. Jika data habis, tampilkan "Sudah semua!" dan berhenti mengamati.

Kapan Tidak Memakai Infinite Scroll?

Untuk konten yang perlu "kembali ke posisi" (hasil pencarian, dokumentasi), pagination bernomor lebih baik. Infinite scroll membuat footer tidak terjangkau dan sulit kembali ke item tertentu.

Kesalahan Umum

  • Request ganda karena tidak ada guard sedangMuat.
  • Observer tidak di-disconnect saat data habis (request terus ke API).
  • Tidak ada cara kembali ke atas (kombinasikan dengan tombol back-to-top).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Tombol Muat Manual

Ubah menjadi pola hybrid: setelah 3 halaman otomatis, tampilkan tombol "Muat Lebih Banyak" yang harus diklik untuk lanjut (pola yang dipakai Facebook untuk hemat kuota).