Membuat Indikator Scroll dengan Javascript

Membuat Indikator Scroll dengan Javascript - Pernahkah kalian memperhatikan bahwa ketika kalian melakukan scroll halaman web ada scroll bar di bagian atas halaman? scroll bar ini menunjukkan jumlah halaman yang discroll. Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Dalam cuplikan ini, kami akan menunjukkan cara sederhana dan cepat untuk membuat indikator scroll untuk situs web kalian dengan bantuan kode JavaScript kecil.

Membuat HTML

Buat tiga elemen <div> dengan nama kelas "header", "container", "text".
Di dalam "container" <div> buat <div> lainnya dengan nama kelas "progress-bar" dan id "mybar".
Buat judul dengan tag <h2>.
Buat tag <p> untuk memasukkan teks untuk discroll.

<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="container">
    <div class="progress-bar" id="mybar"></div>
  </div>
</div>
<div class="text">
  <p>Lorem Ipsum is simply dummy text…</p>
</div>

Memberikan CSS

Atur posisi header agar fixed.
Tentukan width dan background-color header.
Set perataan teks <h2> dengan properti text-align

.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #32a2a8;
}
.header h2 {
text-align: center;
}

Atur width, height, dan background-color seluruh container

.container {
width: 100%;
height: 10px;
background: #cccccc;
}

Atur indikator progres dengan menentukan tinggi dan warnanya.
Tentukan padding teks. Nilai pertama mengatur sisi atas dan bawah dan yang kedua menetapkan sisi kanan dan kiri.

.progress-bar {
height: 10px;
background: #005357;
width: 0%;
}
.text {
padding: 100px 0;
}

Menambahkan Javascript

Gunakan window.scroll sehingga indikator hanya berfungsi ketika user melakukan scroll pada halaman

<script>
    window.onscroll = function() {
        var windowScroll = document.documentElement.scrollTop;
        var windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        var scrollAmount = (windowScroll / windowHeight) * 100;
        document.getElementById("mybar").style.width = scrollAmount + "%";
    };                                
</script>

Pada artikel diatas jika sudah dilakukan dengan bear bisa kalian test sendiri, demikian artikel kali ini yang membahas tentang membuat indikator scroll dengan javascript, sampai jumpa di artikel selanjutnya, semoga bermanfaat