Membuat Scroll Bar menggunakan HTML dan CSS

Hallo teman-teman, pada kesempatan kali ini saya akan memberikan cara Membuat Scroll Bar menggunakan HTML dan CSS. Sebelum kita memulainya, hal yang harus dipersiapkan adalah text-editor dan browser.

Jika sudah siap semua, pembahasan singkat tentang scroll bar disini adalah jika kita mempunyai banyak text atau kalimat maka pada browser pasti ada sebuah scroll bar (biasa di pojok kanan) untuk menscroll kebawah dan keatas jika sebuah kalimat atau text sudah terlalu banyak.

Untuk pembahasan diatas tentang scroll bar sudah cukup jelas bukan ? jika belum jelas, oke kita langsung mempraktekannya saja.

Pertama-tama buka text-editornya lalu masukan script HTML di bawah ini :

 <h2>DUMETSCHOOL</h2>
   <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
   </div>
   <br />      
   <div class="auto">
      The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </div>

Jika sudah simpan script HTML nya dengan nama index.html atau terserah teman-teman untuk penamaan filenya intinya yang terpenting adalah extensionnya atau formatnya .html

Oke lanjut ketik script CSS nya di bawah ini :

.scroll{
    display:block;
    border: 1px solid red;
    padding:5px;
    margin-top:5px;
    width:300px;
    height:50px;
    overflow:scroll;
}
.auto{
     display:block;
     border: 1px solid red;
     padding:5px;
     margin-top:5px;
     width:300px;
     height:50px;
     overflow:auto;
}

Jika sudah HTML dan CSSnya langkah selanjutnya teman-teman bisa simpan dan jalankan/run dibrowser yang teman-teman gunakan.

Jika sudah benar maka hasilnya akan seperti pada gambar dibawah ini :

Oke jika hasilnya sudah seperti pada gambar diatas maka artinya teman-teman telah berhasil dalam Membuat Scroll Bar menggunakan HTML dan CSS.

Sekian pembahasan kali ini tentang Membuat Scroll Bar menggunakan HTML dan CSS semoga dapat bermanfaat.

Terimakasih.