Mungkin ada yang belum mengetahui soal scrollbar tampilan situs web dapat disesuaikan sesuai keinginan atau biasa disebut custom scrollbar.

ketika membuka sebuah situs web / blog maka akan menampilkan scrollbar default disebelah kanan layar yang menandakan seberapa dalam kalian menggulir layar.

Begitupun pada situs ini, perhatikan pada layar sebelah kanan jika kalian membuka di desktop / laptop terdapat scrollbar. Bisa dikatakan scrollbar situs ini berbeda dengan beberapa situs lain yang menggunakan scrollbar default / bawaan browser.

Cara membuatnya cukup terapkan code berikut di file CSS:

::-webkit-scrollbar {
   width: 12px;
}
::-webkit-scrollbar-track {
   background: #f90;
}
::-webkit-scrollbar-thumb {
   background: blue;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
   background: black;
}

Save dan lihat hasilnya !

-webkit ini berfungsi untuk Google Chrome, Opera dan Safari. Saat ini Mozilla menerapkan ketentuan baru yaitu tidak dapat menerapkan scrollbar hanya dengan CSS, perlu menerapkannya dengan JavaScript / tema website.

Custom Scrollbar Safari

Walaupun dengan -webkit saja sudah dapat diterapkan untuk Safari kadang pada beberapa kasus masih ada yang tidak berfungsi. Tidak perlu panik, cukup buat code baru dan terapkan lagi di file CSS seperti ini:

::-ms-scrollbar {
   width: 12px;
}
::-ms-scrollbar-track {
   background: #f90;
}
::-ms-scrollbar-thumb {
   background: blue;
}
::-ms-scrollbar-button:start:decrement,
::-ms-scrollbar-button:end:increment {
   background: black;
}

Hanya berbeda sedikit dari code sebelumnya yaitu -webkit- menjadi -ms-, tapi jangan hapus yang -webkit- tadi supaya bisa diterapkan juga pada Chrome dan Opera.

Jika dengan -webkit saja cukup, maka tidak perlu ditambah lagi code lain.

Custom Scrollbar Dalam Class / ID

Penjelasan diatas adalah scrollbar default / bawaan dari HTML, tapi jika kalian ingin merubah style scrollbar yang dibuat sendiri (menggunakan kolom baru / class / id / div / sebagainya) maka perlu menerapkan nama class / id tersebut.

Misalnya kalian membuat sebuah kolom kecil baru menggunakan div dengan class namascrollbar atau biasa disebut scroll didalam div / kolom. Maka pada code CSS diatas perlu diawali dengan .namascrollbar agar tidak salah panggil, jika polos seperti code diatas (atau menggunakan body) itu akan memanggil scrollbar utama website. Jadi seharusnya seperti ini untuk merubah style scrollbar yang ada didalam div class:

.namascrollbar::-ms-scrollbar {
   width: 12px;
}
.namascrollbar::-ms-scrollbar-track {
   background: #f90;
}
.namascrollbar::-ms-scrollbar-thumb {
   background: blue;
}
.namascrollbar::-ms-scrollbar-button:start:decrement,
.namascrollbar::-ms-scrollbar-button:end:increment {
   background: black;
}

Maka perubahan hanya berlaku untuk scrollbar yang ada didalam div class namascrollbar saja.

Catatan: Code diatas hanya sekedar contoh saja, silahkan ubah style sesuai selera / sesuaikan dengan UI situs web kalian. Ubah warna background / ukuran scrollbar pada nilai-nilai didalam CSS tersebut.

Jika pada Opera pun tidak berfungsi, cukup tambahkan code baru lagi dengan awalan -o-. Awalnya semua browser termasuk pada Mozilla pun bisa hanya menggunakan CSS3 seperti ini yaitu diawali -moz-, tapi dengan alasan karena Mozilla tidak menyukai kebanyakan pemilik situs web sering merubah gaya scrollbarnya secara rutin maka ditiadakanlah fitur ini. Perlu JavaScript / website dengan tema untuk merubah scrollbar pada browser Mozilla.

Masih bingung ? Lihat : Video tutorial cara membuat kustom scrollbar HTML CSS.

Selamat mencoba !