Implementasi Gulir Tanpa Akhir
Muat lebih banyak konten secara otomatis saat pengguna menggulir.
Implementasi Gulir Tanpa Akhir adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Polanya
Gulir tanpa akhir memuat lebih banyak konten saat pengguna mendekati bagian bawah daftar. Implementasi paling bersih menggunakan IntersectionObserver: tempatkan elemen "sentinel" di akhir daftar dan amati elemen tersebut. Saat sentinel memasuki area pandang, ambil page berikutnya.
Elemen Sentinel
Tambahkan <div> tak terlihat (atau placeholder "loading...") setelah item daftar terakhir. Amati dengan IntersectionObserver. Saat elemen tersebut beririsan, itu menandakan pengguna telah menggulir mendekati bagian bawah—saatnya mengambil data tambahan.
<ul id="feed">
<li>Post 1</li>
<li>Post 2</li>
</ul>
<div id="sentinel" aria-hidden="true"></div>Siklus Pengamat
Saat terjadi persinggungan: ambil page berikutnya, tampilkan item baru, dan posisikan ulang sentinel (sentinel tetap berada di akhir daftar secara otomatis jika Anda menambahkan item sebelum sentinel). Tidak perlu melakukan unobserve lalu observe kembali—sentinel masih diamati.
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);Penjaga Status Pemuatan
Penanda boolean loading mencegah penumpukan permintaan jika pengguna menggulir cepat dan memicu beberapa persinggungan sebelum respons pertama tiba. Tanpa penanda ini, page yang sama diambil berulang kali dan item muncul secara duplikat.
Akhir Data
Saat server mengembalikan page kosong (atau menandakan "tidak ada lagi"), gunakan unobserve pada sentinel dan ganti dengan pesan akhir daftar. Persinggungan berikutnya tidak akan memicu pengambilan data; pengguna dapat melihat bahwa mereka telah mencapai bagian akhir.
Penanganan Kesalahan
Bungkus pengambilan data dalam blok percobaan/penangkapan. Jika terjadi kesalahan, biarkan penanda loading tetap bernilai benar agar percobaan ulang tidak dipicu otomatis; tampilkan tombol "Coba Lagi" yang mengatur ulang penanda loading dan memicu kembali pemuatan. Tanpa langkah ini, kegagalan jaringan dapat menyebabkan badai percobaan ulang.
rootMargin untuk Pemuatan Proaktif
rootMargin: "500px" memulai pengambilan page berikutnya 500 piksel sebelum pengguna mencapai sentinel. Sesuaikan berdasarkan tinggi item dan kecepatan gulir rata-rata—terlalu kecil membuat pengguna menemui pesan "belum ada konten"; terlalu besar membuat Anda mengambil data sebelum dibutuhkan.
Pemulihan Posisi Gulir
Saat pengguna berpindah dan kembali, posisi gulir harus dipertahankan AND item yang telah dimuat sebelumnya harus ditampilkan kembali. Simpan item di sessionStorage atau penyimpanan bergaya Zustand; pulihkan saat komponen dipasang dan gunakan scrollTo untuk menuju offset yang diingat.
Pertimbangan Memori
Gulir tanpa akhir yang panjang mengakumulasi ribuan simpul DOM. Untuk feed yang sangat panjang seperti Twitter dan Facebook, gabungkan dengan teknik jendela: hapus item di atas area pandang dari DOM, lalu pulihkan saat pengguna menggulir ke atas. Pustaka seperti react-virtual atau @tanstack/virtual menangani hal ini secara efisien.
Aksesibilitas
Gulir tanpa akhir menyulitkan pengguna papan ketik dan pembaca layar yang tidak dapat dengan mudah mencapai kaki halaman. Sediakan tombol alternatif "Muat lebih banyak" sebagai cadangan dan pastikan halaman memiliki kaki halaman nyata yang dapat diakses melalui tombol Home/End. Wilayah pengumuman langsung yang memberi tahu tentang item baru juga membantu.
Gulir Pantulan di Perangkat Seluler
Gulir pantulan di iOS dapat memicu persinggungan beberapa kali di dekat bagian bawah. Penjaga loading menangani sebagian besar kasus; Anda juga dapat menunda pemrosesan selama 300 milidetik untuk menyaring lonjakan persinggungan selama pantulan.
Alternatif: Paginasi Berbasis Kursor
API server sebaiknya mengembalikan "kursor berikutnya", bukan mengandalkan nomor page yang dilacak klien—cara ini lebih tahan terhadap penyisipan atau penghapusan item selama pengguliran. Klien meneruskan kursor pada setiap permintaan dan berhenti saat server tidak mengembalikan kursor.
Pemeriksaan Pengetahuan
Mengapa penanda "pemuatan" diperlukan dalam fungsi panggilan balik IntersectionObserver untuk guliran tak terbatas?
Ringkasan
Guliran tak terbatas menggunakan IntersectionObserver pada elemen penanda di akhir daftar. Saat terjadi persinggungan, ambil halaman berikutnya, tampilkan, lalu tetap amati. Lindungi proses dengan penanda pemuatan, tangani akhir data dan kesalahan dengan baik, serta sesuaikan rootMargin untuk menentukan jarak pramuat. Sediakan alternatif untuk papan ketik (tombol Muat lebih banyak) dan pertimbangkan pembagian jendela untuk umpan yang sangat panjang.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Implementasi Gulir Tanpa Akhir” gratis?
Ya — teks lengkap “Implementasi Gulir Tanpa Akhir” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Implementasi Gulir Tanpa Akhir”?
Muat lebih banyak konten secara otomatis saat pengguna menggulir. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Implementasi Gulir Tanpa Akhir” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- IntersectionObserver API dan Ambang Batas
- Pemuatan Malas dengan IntersectionObserver
- Implementasi Gulir Tanpa Akhir
- Menyiapkan Animasi yang Terhubung dengan Guliran