MoreLesson 213Preview gratis
Scroll Drawing
Lesson ini bagian dari How To · Semua level
Ringkasan
Scroll drawing atau scroll progress indicator adalah garis yang terisi seiring halaman digulir, memberi tahu seberapa jauh pengguna membaca. Nilainya dihitung dari posisi scroll dibagi total jarak scroll yang tersedia, lalu diubah menjadi persen. Hasilnya diterapkan pada lebar elemen fixed di bagian atas halaman.
Poin kunci
- Total jarak scroll dihitung dari scrollHeight dikurangi clientHeight
- Persentase progres = scrollTop / (scrollHeight - clientHeight) * 100
- Indikator biasanya memakai position: fixed di bagian atas dengan height kecil
- Gunakan requestAnimationFrame atau event passive agar scroll tetap lancar
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.