Cara Merubah Styling ScrollBar Menggunakan CSS3

Hallo teman-teman, Pada tutorial kali ini kita akan membahas bagaimana cara merubah styling pada ScrollBar. Disini saya menggunakan bantuan Plugin jQuery jquery.jscrollpane.js untuk merubah styling ScrollBar sesuai yang kalian inginkan dan Effect ScrollBar ini dapat kalian lihat jika isi konten lebih besar dari area windownya. Disini saya ingin memberi tahu bahwa effect styling Scrollbar ini belum tentu bisa berjalan sempurna di browser Safari atau pun Google Chrome, maka dari itu kalian perlu menambahkan Pseudo Elemen webkit pada CSS agar styling Scrollbar kalian dapat berjalan sempurna. Baiklah langsung saja kita masuk ke pokok pembahasannya.

Pertama kalian bisa buat HTML nya seperti gambar dibawah ini, dimana saya mengunakan elemen <div> dengan Class .container untuk membungkus 4 elemen <p>. Contohnya seperti gambar dibawah ini :

Kemudian untuk CSS nya kalian bisa ikuti seperti gambar dibawah ini :

Kalian bisa lihat di CSS dengan selector .container terdapat Property CSS overflow: scroll dimana fungsinya adalah untuk membuat ScrollBar pada isi konten atau gambar.

Dan untuk Script jQuery nya seperti gambar dibawah ini :

Setelah semuanya kalian buat kalian bisa jalankan dibrowser dan lihat hasilnya. Sekian dulu tutorial dari saya semoga tutorial ini bermanfaat untuk kalian semua. Terima Kasih.

DEMO | DOWNLOAD