MoreLesson 168Preview gratis
Scroll Indicator
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas indikator progres yang menunjukkan seberapa jauh pengguna menggulir halaman. Indikator biasanya berupa bilah tipis di bagian atas yang lebarnya bertambah sesuai posisi scroll. Perhitungannya membandingkan jarak yang sudah digulir dengan total jarak gulir yang tersedia.
Poin kunci
- Gunakan window.scrollY atau documentElement.scrollTop untuk posisi gulir saat ini
- Hitung total jarak gulir dengan scrollHeight dikurangi clientHeight
- Perbarui lebar indikator dalam persen dan tangani pembagian dengan nol
- Dengarkan event scroll secara passive dan hitung ulang saat ukuran halaman berubah
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.