Membuat Scroll di PHP Keren Dengan Over Flow

Salam Bloger...

Pada Tutorial PHP kali ini, Fatra Code akan membagikan tutorial tentang bagaimana membuat scroll di halaman website.

Scroll tidak hanya bisa muncul ketika halaman website melebihi tinggi dari monitor saja, namun scroll bisa juga digunakan dalam sebuah tag div meskipun tingginya tidak melebihi lebar monitor.

Hal ini bisa berguna untuk menghemat space atau ruang kosong pada website, biasanya ini banyak digunakan untuk aplikasi chat, tabel laporan, dll.

Berikut ini cara membuat div agar memiliki scroll dengan html dan css

Langkah Pertama: Tambahkan CSS seperti berikut ini:

.scroll{
  width: 300px;
  background: orange;
  padding: 10px;
  overflow: scroll;
  height: 300px;
  
  /*script tambahan khusus untuk 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;
}

script yang paling berpengaruh disana adalah pada overflow: scroll, dan height: 300px;

karena hal tersebut yang bisa membuat div yang tadinya tinggi menjadi ada scroll karena tingginya hanya dibuat 300px, walaupun nanti isi div hanya sedikit, space untuk scroll akan tetap terlihat.

Langkah Kedua: Buat sebuah tag div dengan nama class scroll

Masukkan isi dari konten yang ingin anda masukkan dalam bagian scroll <p> Pada bagian ini  </p>

<div class="scroll">
  <p>Lorem ipsum dolor sit amet.</p>
  <p>....</p>
  <p>....</p>
</div>

Hasil :

Contoh Scroll Overflow 

....

....

Semoga Bermanfaat. Jika ada hal yang sulit dimengerti silahkan masukkan di kolom komentar