Mengubah tampilan scroll bar

Mengubah tampilan scroll bar

286
0
SHARE

Halo kawan .. kali ini kita akan membahas tentang bagaimana mengubah tampilan scroll bar. Bila kita menggunakan div dengan overflow, maka akan muncul scroll bar seperti pada gambar di atas. Tampilan scroll bar tersebut akan menyesuaikan dengan browser yang kita pakai. Permasalahannya adalah tampilan scroll bar terkadang tidak sesuai dengan template yang kita pakai, sehingga terkadang agak mengganggu tampilan. Nah dalam kesempatan ini kita akan membahas bagaimana mengubah tampilan scroll bar tersebut.

Untuk mengubah tampilan scroll bar tersebut kita bisa menggunakan plugin jquery yang ada di http://manos.malihu.gr/jquery-custom-content-scroller. Penggunaannya cukup mudah. Anda hanya perlu mendownload plugin tersebut. Berikut ini adalah cara penulisan kodenya.

Step 1 : Buatlah index.php dengan kode sebagai berikut :

Step 2 : Masukkan css, jquery dan js pada index.php.

Step 3 : Tambahkan fungsi javascript berikut ini.

Sehingga kode anda secara keseluruhan akan tampak seperti ini.

Jalankan index.php melalui browser dan lihatlah hasilnya.

Berikut ini adalah hasil screenshot scroll bar yang telah diubah tampilannya.

scroll

Anda bisa memilih theme yang sekiranya sesuai dengan template yang anda gunakan, atau anda dapat memodifikasi cssnya bila theme yang telah disediakan dirasa kurang memuaskan.

Bagaimana, mudah bukan membuatnya. Selamat mencoba. Terima kasih telah berkunjung ke harviacode.com.

Bagikan artikel ini ya.. terima kasih

NO COMMENTS

LEAVE A REPLY