Mengubah style scroll web ini bertujuan untuk menyelaraskan element browser dengan template yang dipasang. Karena disetiap browser mempunyai default style yang berbeda, jadi trik ini cukup penting untuk di terapkan. Seperti yang terlihat pada Gambar 1 di atas, defaultnya browser Chrome desktop (windows) memakai warna gray (abu-abu).

Jika website kita memakai warna dasar biru, maka sebaiknya ubah juga warna scroll di browser. Yang di edit disini ada CSS webkit scrollbar, dan contoh penggunaan sederhana seperti ini:

Kode di atas akan menghasilkan scrollbar seperti Gambar 2 di bawah:

Penjelasan:

• ::-webkit-scrollbar { -webkit-appearance: none; }untuk me-reset style default browser.
• ::-webkit-scrollbar:vertical { width: 6px; }menentukan ketebalan scrollbar untuk mode vertical (kiri kekanan/sebaliknya).
• ::-webkit-scrollbar:horizontal { height: 6px; }untuk menentukan ketebalan scrollbar mode horizontal (atas ke bawah/sebaliknya).
• ::-webkit-scrollbar-thumb {}ini bagian untuk mengubah style scrollbar (lihat pada Gambar 3 bagian no.2),background-color: #0D8FDB;adalah warna dasar scrollbar dan ketebalan radius bordernya ada di code iniborder-radius: 6px;, ubah nilainya menjadi0maka scrollbar akan mempunyai style kotak.border: 2px solid rgba(255,255,255,.15);ini untuk memberi efek gradient. Cukup ubah angka pada bagian.15maka akan mengubah kecerahan warna scrollbar.
• ::-webkit-scrollbar-track{}adalah element di dalam scrollbar, lihat bagian no.3 pada Gambar 3 dibawah ini:
  
  
  

  Gambar 3: Penjelasan element

Selain mengubah style di atas, ada beberapa element CSS webkit-scrollbar lagi yang bisa di ubah seperti:::-webkit-scrollbar-button,::-webkit-scrollbar-track-piece,::-webkit-scrollbar-corner,::-webkit-resizer {}

Silahkan custom warna scrollbar blog atau website dengan warna kalian.
Gambar 1: Default style scroll Chrome Mengubah style scroll web ini bertujuan untuk menyelaraskan element browser dengan template yang dip...