Cara tambahkan Scroll pada TAG di HTML dengan CSS | #6 | Mukti911

A. Pendahuluan

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.

B. Latar Belakang
Beberapa hal di Tag mungkin harus mengunakan scroll karena space yang fixed namun contentnya melebihi isinya.

C. Maksud dan Tujuan

• Agar dapat mggunakan fungsi style scroll di css. 

D. Pembahasan

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: Buat sebuah tag div dengan nama class scroll, terlebih dahulu dengan HTML.

<div class="scroll">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="z-container container-fluid"></p>
  <p>....</p>
  <p>....</p>
</div>

Langkah Kedua: Kemudian pada css nya Anda bisa tambahkan 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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

....
....

E. Hasil Yang Didapat

• Dapat menambahkan scroll pada TAG di html

E. Kesimpulan
Nah itulah cara untuk menambahkan sebuah scroll pada TAG di html. Semoga Bermanfaat
F. Referensi

• -