htmlcssjavascriptscrollefekPemula8 mnt baca

Scroll Progress Bar

Bar tipis di atas halaman yang menunjukkan seberapa jauh pembaca sudah scroll.

Apa Itu Scroll Progress Bar?

Perhatikan bar ungu tipis di atas banyak blog: ia terisi dari 0 ke 100 persen seiring kamu scroll. Ini memberi pembaca gambaran "tinggal sedikit lagi" sehingga mereka bertahan membaca. Efeknya kecil, implementasinya hanya butuh satu rumus.

Langkah Membangun

HTML: Satu <div class="progress"> fixed di paling atas halaman, plus konten panjang untuk di-scroll.

CSS: Bar memakai position: fixed; top: 0; left: 0; height: 4px dengan background gradien. Lebarnya diatur JS via style.width.

JS: Dengarkan event scroll pada window. Rumusnya:

js
const persen = scrollY / (tinggiDokumen - tinggiLayar) * 100;
  • window.scrollY: seberapa jauh sudah scroll dari atas.
  • document.documentElement.scrollHeight: total tinggi halaman.
  • window.innerHeight: tinggi layar yang terlihat. Kurangi tinggi layar dari total karena bagian terakhir layar tidak bisa di-scroll lagi.

Performa

Event scroll bisa terpanggil puluhan kali per detik. Untuk bar sederhana ini tidak masalah, tapi untuk efek berat gunakan requestAnimationFrame atau teknik throttle. Ini konsep penting saat efek scroll-mu mulai kompleks.

Kesalahan Umum

  • Bar tidak mencapai 100 persen di akhir (lupa mengurangi tinggi layar).
  • Bar menutupi navbar (beri z-index tinggi atau taruh di bawah navbar).
  • Menghitung ulang di setiap scroll tanpa cache untuk halaman statis (simpan tinggi dokumen di variabel).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Persen Angka

Tambahkan lingkaran kecil di pojok kanan bawah yang menampilkan angka persen scroll (misal "45%") dan ikut terupdate. Lingkaran muncul hanya setelah pengguna scroll lebih dari 100px.