Cara Membuat Scroll Bar Content dengan HTML dan CSS

Hallo teman-teman, Bertemu kembali dengan saya diwebsite ini. Seperti biasanya ya teman-teman, semoga masih diberikan medis dan kebahagiaan agar dapat kembali semangat pada mencari informasi atau ingin mengupgrade skill didunia laman.

di kesempatan kali ini saya akan memberikan Cara Merancang Scroll Bar Content dengan HTML dan CSS. Sebelum kita memulainya, hal yang mesti dipersiapkan yakni text-editor dan browser.

Sekiranya telah siap seluruh, pembahasan singkat mengenai scroll bar disini yakni apabila kita mempunyai banyak text atau kalimat karenanya di browser pasti ada sebuah scroll bar (biasanya di pojok kanan) bagi menscroll kebawah dan keatas apabila sebuah kalimat atau text telah terlalu banyak.

Bagi pembahasan diatas mengenai scroll bar telah lumayan jelas bukan ? apabila belum jelas, oke kita seketika mempraktekannya saja.

Cara Merancang Scroll Bar Content dengan HTML dan CSS

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

 <h2>Source Code Aplikasi</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 aplikasi 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>

Sekiranya telah simpan script HTML nya dengan nama index.html atau terserah teman-teman bagi penamaan filenya intinya yang terpenting yakni 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;
}

Sekiranya telah HTML dan CSSnya langkah berikutnya teman-teman dapat simpan dan jalankan/run dibrowser yang teman-teman gunakan.

Sekiranya telah benar karenanya hasilnya akan seperti di gambar dibawah ini :

Oke apabila hasilnya telah seperti di gambar diatas karenanya artinya teman-teman telah berhasil pada Cara Merancang Scroll Bar Content dengan HTML dan CSS.

Demikian pembahasan kali ini mengenai Cara Merancang Scroll Bar Content dengan HTML dan CSS semoga dapat bermanfaat.

Terimakasih.

Sumber https://kursuswebsite.org