Kota Banjar
(0265) 7549789

Customize Scrollbars dengan CSS3

scrollbar memang tidak terlalu di perhatikan oleh pengguna yang mengunjungi sebuah website biasanya pengunjung hanya memperhatikan bagian-bagian yang sangat terlihat saja seperti header, bagian content, sidebar, footer, jenis font dan element lainnya. Akan tetapi untuk lebih baik nya untuk mendesign sebuah website atau aplikasi lainnya. Anda harus memperhatikan segala hal detail dari user interface termasuk bagian scroolbar. Mengganti ataumengubah tampilan scrollbar dengan css3 agar lebih terlihat menarik dan rapi.

CSS3 telah menyediakan fitur yang berfungsi untuk mengurusi hal-hal yang menyangkut dengan scrollbar website. kita dapat mengubah warna track, thumb dan scrollbarnya.

Cara Design Tampilan Scrollbar Dengan CSS3

Ada beberapa fungsi khusus yang di sediakan oleh css3 untuk mengubah tampilan scrollbar. di antaranya adalah :

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-thumb

ketiga fungsi di atas adalah,

  • ::-webkit-scrollbar untuk bagian scrollbar secara keseluruhan.
  • ::-webkit-scrollbar-track berguna untuk tampilan track/jalur dari scrollbar.
  • ::-webkit-scrollbar-thumb untuk cursor scrollbar.

Berikut contoh script scrollbar dengan css

/*css3 desain scrollbar*/
::webkitscrollbar {
    width: 8px;
}
::webkitscrollbartrack {
    webkitboxshadow: inset 0 0 6px rgba(0,0,0,0.3);    
    background: #fff;    
}
::webkitscrollbarthumb {
    background: #57ad68;
}

Keterangan :

  • Disini saya menentukan lebar dari scrollbar nya sebesar 8px.

::-webkit-scrollbar {

width: 8px;

}

  • Untuk bagian track nya berwarna putih dengan kode warna #fff.

::-webkit-scrollbar-track {

background: #fff;

}

  • Dan bagian thumb nya berwarna hijau dengan kode warna #57ad68.

::-webkit-scrollbar-thumb {

background: #232323;

}

Anda dapat menyesuaikan sendiri dengan apa yang anda inginkan. Anda juga dapat menambahkan script lain seperti

::-webkit-scrollbar-thumb {
background: #57ad68;
}
::-webkit-scrollbar-thumb:hover{
background-color:#000fff;
border:1px solid #000fff;
}
::-webkit-scrollbar-thumb:active{
background-color:#808080;
border:1px solid #808080;
}

berfungsi untuk merubah warna scrolbar saat di scroll oleh kursor

 

Leave a Reply