Cara Mengubah Style Scrollbar Blog/Web pada Chrome, Opera & IE

Tampilan Scrollbar di sebuah situs terkadang menjadi perhatian lebih karena sering kali scrollbar ini mengurangi keindahan desain web jika tidak diubah stylenya. Misalnya, pada desain web bergaya flat, akan sangat tidak cocok jika ada sebuah elemen memiliki konten yang banyak sehingga memanjang kebawah, namun height(tinggi)-nya dibuat tetap(fix) sehingga menampilkan scrollbar secara otomatis.
Tentu saja keberadaan scrollbar ini dapat merusak pemandangan karena tidak sesuai dengan desain flat yang tidak bertekstur. Terlebih lagi, setiap browser memiliki tampilan default tersendiri untuk scrollbar. Berikut ini adalah contoh penggunaan scrollbar yang belum dimodifikasi :

Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus.

Memang, pada beberapa browser modern tampilan scrollbar ini terlihat sudah cocok, namun tidak dengan browser dengan versi yang lebih rendah. Karena itulah scrollbar ini perlu ditetapkan desainnya. Terlebih lagi, Scrollbar dengan gaya tersendiri akan lebih menarik kelihatannya. Berikut ini penggunaan scrollbar yang sudah dimodifikasi :

1. Kostumisasi Scrollbar untuk Browser Chrome, Opera 15+, Safari, Android, iOs

Ada 7 Pseudo elemen yang dapat anda gunakan untuk mengubah style scrollbar pada website.

::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }

Ada juga beberapa Pseude class element yang bisa anda gunakan :

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Contoh :

Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus.

Kode :

<style>.flat{background:#842323;margin:auto;width:300px;padding:5px;height:300px;overflow:auto;position:relative}.flat div{width:43%;float:left;margin-right:7px;color:#fff;padding:5px;font-size:12px;}.first{background:#fb8833;}.second{background:#606036;}
.modified-scrollbar::-webkit-scrollbar{background:transparent;}
.modified-scrollbar::-webkit-scrollbar-thumb{background:#1585bc;border:none;padding:0}
.modified-scrollbar::-webkit-scrollbar-thumb:window-inactive{background:#69aae0}
</style>

<div class="flat modified-scrollbar">
<div class="first">
Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.</div>
<div class="second">
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus.</div>
</div>

Kode yang berwarna merah adalah kode untuk mengubah gaya scrollbar dari elemen dengan class "modified-scrollbar". Selebihnya, silahkan anda praktekkan sendiri dengan menggunakan pseudo elemen yang sudah dijelaskan pada gambar.

2. Kostumisasi Scrollbar pada Internet Explorer

Teknik kostumisasi scrollbar pada IE menggunakan Properti CSS. Langsung saja, berikut ini adalah beberapa properti css yang bisa digunakan :

scrollbar-face-color:value;
scrollbar-shadow-color: value;
scrollbar-highlight-color:value;
scrollbar-3dlight-color: value;
scrollbar-darkshadow-color:value;
scrollbar-track-color: value;
scrollbar-arrow-color:value;

Contoh :

Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus.

Kode :

<style>.flat{background:#842323;margin:auto;width:300px;padding:5px;height:300px;overflow:auto;position:relative}.flat div{width:43%;float:left;margin-right:7px;color:#fff;padding:5px;font-size:12px;}.first{background:#fb8833;}.second{background:#606036}

.modified-scrollbar-ie{
scrollbar-base-color:transparent;
scrollbar-track-color:transparent;
scrollbar-arrow-color:#1585bc;
scrollbar-face-color:#1585bc;
}
</style>

<div class="flat modified-scrollbar-ie">
<div class="first">
Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.</div>
<div class="second">
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus.</div>
</div>

Kode yang berwarna merah adalah kode untuk mengubah gaya scrollbar dari elemen dengan class "modified-scrollbar-ie". Selebihnya, silahkan anda praktekkan sendiri dengan menggunakan property CSS lain yang sudah dijelaskan pada gambar.

Oke, Mungkin itu saja pembahasan dari saya. Untuk Firefox nanti menyusul yaa. Semoga Bermanfaat, Selamat mencoba!

Referensi :
- http://css-tricks.com/custom-scrollbars-in-webkit/
- http://css-tricks.com/almanac/properties/s/scrollbar/
- http://codemug.com/html/custom-scrollbars-using-css/

~Muhammad Syakirurohman~

Terima pemberitahuan update artikel ke email anda!

Delivered by FeedBurner

Dilarang menyalin artikel tanpa sumber!