Selamat Datang

Cara Membuat Scroll pada Tag DIV dengan HTML dan CSS

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.</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.

DEMO
JS Bin on jsbin.com

Semoga berguna.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

8 thoughts on “Cara Membuat Scroll pada Tag DIV dengan HTML dan CSS

  1. pen quran says:

    oh makasih gan materinya, banyak membantu pen quran

  2. Mantap gan, ternyata tidak terlalu ribet gan

  3. Izin menyimak mau di dalemi biar lebih ngerti untuk dipraktekkan gan

  4. Martin ms says:

    Kalau dimasukin ke tema bootstrap gimana gan? Atau ada solusi dr bootstrap?

  5. Sangaaaaarrrrrr!!!!! membantu sekali. :)

  6. Fadlhy MJ says:

    Berguna banget gan. Thanks!

  7. adi says:

    gann minta tutorial chat sderhana dunk menggunakan codeigniter

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development