Custom Scrollbar dengan CSS dan Webkit

Custom Scrollbar dengan CSS dan Webkit – Hallo semuanya, pasti kalian pernah melihat sebuah website yang memiliki scrollbar dengan bentuk atau warna yang berbeda, tahukah kalian bahwa css sendiri juga secara default memiliki property yang bisa kalian gunakan untuk mengubah tampilan dari scriollbar.

Berikut ini adalah daftar property yang bisa kalian gunakan dengan webkit.

• ::-webkit-scrollbar – Memili scrollbar
• ::-webkit-scrollbar-button – Memilih tombol scroll
• ::-webkit-scrollbar-thumb – Memilih handle scroll
• ::-webkit-scrollbar-track – Memilih progress bar pada scroll
• ::-webkit-scrollbar-track-piece – Memilih progress bar pada scroll tanpa handle
• ::-webkit-scrollbar-corner – Memilih sudut scroll bar
• ::-webkit-resizer – Memilih.handle resize

Sekarang kita akan coba praktek dengan menggunakan html seperti berikut

    <h1>Hallo</h1>
    <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.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.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.</p>

Selanjutnya kita berikan css default seperti berikut.

article{
    background: lightgreen;
    overflow-y:scroll;
    height: 200px;
    width: 300px
}

Jika sudah, maka kita akan coba memberikan custom scrollbar dengan css seperti berikut

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Dengan begitu scrollbar akan berubah menjadi seperti ini

Sebagai catatan, custom scrollbar dengan webkit css ini hanya berlaku untuk browser berbasis webkit seperti Google Chrome, dan Safari, untuk Firefox tidak akan berjalan.

Baiklah teman-teman demikian artikel kali ini, yang membahas tentang cara membuat custom scroll dengan CSS dan Webkit. Semoga bermanfaat