Buat Scroll Sederhana di HTML dengan CSS

Oke kali ini kita akan share bagaimana cara membuat scroll bar di HTML dengan CSS tentunya, tanpa css mungkin akan sulit dilakukan karena fungsi utama css adalah untuk mengatur tampilan dari HTML itu sendiri.

Scroll kadang kita butuhkan ketika kita membutuhkan space tempat yang lebih besar namun terbatas hanya memiliki ruang yang kecil misalkan untuk meletakkan gambar berukutan 1000x500 pada tempat berukuran 300x200 saja tentu akan kesulitan. atau meletakkkan data yang berbaris-baris sehingga perlu ruang yang begitu panjang. Maka dari itu diperlukan scroll bar untuk merapikan hal tersebut.

Langsung saja, masuk ke pokok permasalah, kita buat contoh seperti berikut :

<style>
.contohspace{
  width: 350px;
  overflow: auto;
  background: #f0f0f0;
  border: solid #bbb 1px;
  height: 100px;
}
</style>

<div class="contohspace">
contoh saja
<div style="padding-top:200px"></div>
contoh saja
codenol
</div>

Silahkan coba save dan format filenya adalah .html . Coba jalankan di browser serta lihat hasilnya :



Contoh demo langsung :

contoh saja
contoh saja
codenol

Dari sekian kode css yang ada yang sebenarnya kita perlukan adalah overflow:auto untuk membuat scroll, agar scroll dapat muncul tentu harus ada pembatasan tinggi dari ruang yang ada seperti di atas height: 100px; saja maka pasti akan seperti gambar di atas. Sedangkan berbeda halnya dengan scroll membentuk horizontal, karena contoh di atas adalah vertical scroll bar atau biasa juga scroll y