Cara Membuat Scroll Dengan HTML-CSS3

Halo, ketemu lagi dengan saya 🙂 apa kabarnya ? semoga sehat yah, amin.

Pada kesempatan kali ini saya akan berbagi sedikit tutorial mengenai CaraÂ Membuat Scroll Dengan HTML-CSS3, Kalian pasti sudah mengenla yah apa itu scroll ? yah scroll akan muncul ketika sebuah halaman website lebar dan tinggi nya tidak mencukupi maka dengan adanya scroll semua konten pada website akan terlihat, baik langsung saja kita paraktikan.

1. Silahkan buka teks editor nya, kemudian ketikan kode HTML berikut.

<div class="scroll">
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text</p>
  </div>

2. Selanjutnya untuk membuat scroll kita gunakan property overflow:scroll seperti berikut.

.scroll{
  width: 300px;
  background: cyan;
  padding: 10px;
  overflow: scroll;
  height: 300px;
  text-align:justify;
  
  /*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;
}

3. Kalo sudah jangan lupa disimpan terlebih dahulu kemudian buka di browsernya masing-masing dan lihat hasilnya. Selesai

Cukup mudah yah ? Baik cukup sekian artkel tutorial mengenai CaraÂ Membuat Scroll Dengan HTML-CSS3, semoga bermanfaat, amin.

Selamat mencoba.

DEMO

Kategori