Cara Menambahkan Scroll pada Tag DIV

Menambahkan scroll pada tag DIV di website kalian memiliki banyak keuntungan, salah satunya adalah utnuk menghemat ruang pada website kalian dan juga membuat tampilan website menjadi lebih menarik karena tidak terganggu atau semrawut gara-gara tidak sejajarnya tag DIV yang ada. Scroll tidak hanya berlaku bagi halaman yang tingginya melebihi lebar monitor, namun juga dapat ditambahkan pada tag DIV agar dapat menghemat tempat tanpa harus memotong isi dari DIV itu sendiri. Langsung saja, ini dia langkah singkat bagaimana cara menambahkan scrollpada tag DIV.

Ilustrasi tag div (sumber : dnjournal.com)

1. Buat CSS seperti script di bawah ini.

.scroll{
  width: 300px;
  background: orange;
  padding: 10px;
  overflow: scroll;
  height: 300px;
  
  /*script untuk browser IE */
  scrollbar-face-color: #CE7E00; 
  scrollbar-shadow-color: #FFFFFF; 
  scrollbar-highlight-color: #6F4709; 
  scrollbar-3dlight-color: #11111; 
  scrollbar-darkshadow-color: #6F4709; 
  scrollbar-track-color: #FFE8C1; 
  scrollbar-arrow-color: #6F4709;
}

2. Buat tag DIV dengan class CSS yang sudah kalian buat di atas.

<div class="scroll">
. . . . 
. . . .
</div>

Script yang paling berpengaruh pada penambahan scroll pada tag DIV terletak pada overflow: scroll dan height: 300px. Height dapat anda atur sesuai selera dan kebutuhan dan juga script untuk IE dapat anda ubah sesuai selera warna yang cocok. Untuk penempatan CSSnya dapat kalian copy-paste ke file CSS website kalian atau di dalam tag <style> pada template blogspot kalian.

Bagaimana? Mudah bukan? Jangan lupa share postingan ini, mungkin ada kerabat atau teman yang membutuhkan.