Merubah Tampilan Scrollbar dengan jQuery

Merubah Tampilan Scrollbar Blog dengan JQuery - Merubah tampilan scrollbar pada blog terkadang diperlukan untuk menyesuaikan dengan desain blog itu sendiri. Perlu atau tidak perlunya tentunya tergantung pemilik blog itu sendiri, apakah ingin dibuat custom atau tetap standar.

Tutorial tentang merubah atau mengganti scrollbar sebetulnya sudah banyak, namun selama melakukan pencarian, kebanyakan menggunakan menggunakan CSS seperti ini

::-webkit-scrollbar{width:6px;background:#444}
::-webkit-scrollbar-thumb{background-color:#222;border-radius:3px}

Karena penggunaan CSS tidak support dengan semua browser, maka saya tawarkan penggunaan jQuery sebagai alternatifnya. Sebetulnya penggunaan custom scrol ini telah saya buat dalam posting sebelumnya yaitu dengan Tiny Scrollbar. Namun penggunaan tiny scrolbar lumayan ribet dan belum bisa digunakan untuk browser itu sendiri, hanya pada elemen tertentu saja.

Akhirnya saya mencari plugin jQuery yang support untuk browser dan terus melakukan uji coba, ini merupakan rasa penasaran saya sekaligus masukan dari para sahabat diantaranya Kang Adhy Suryadi, Kang Heri Assidiqi dan Kang Joel Tumampi yang menginginkan jQuery scrollbar ini.

Setelah sekian lama melakukan ujicoba akhirnya pilihan saya jatuh pada NiceScroll, yang mudah dalam penggunaan dan support untuk scrollbar browser.

Demo NiceScroll

Penggunaan NiceScroll

Untuk menggunakan NiceScroll, simpan kode ini di atas </head>

<script src='https://ghcdn.rawgit.org/kangismet/javascript/gh-pages/jquery.nicescroll.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(
  function() { 
    $("html").niceScroll({});
  }
);
//]]>
</script>

Dengan kode di atas, maka otomatis scrollbar default akan berubah, namun hanya muncul ketika mouse diarahkan ke samping kanan blog. Untuk memunculkan scrollbar secara permanen, maka perhatikan kode pada baris ke 6 yang saya tandai, tambahkan kode cursoropacitymin:1 menjadi

$("html").niceScroll({cursoropacitymin:1});

Masih banyak pengaturan yang lainnya, silahkan sobat lihat di web pemilik NiceScroll ini. Disini saya hanya share beberapa pengaturan yang penting saja :
background:"#ddd" untuk merubah background (edit ddd)
cursorcolor:"#808080" untuk merubah warna kursor (edit 808080)
cursorborder:"1px solid #565656" merubah warna garis pinggir kursor (edit 565656)

sehingga kode lengkap untuk baris no 6 adalah :

$("html").niceScroll({cursoropacitymin:1,cursorcolor:"#808080",cursorborder:"1px solid #565656",background:"#ddd"});

Untuk menerapkan terhadap elemen tertentu, misal sobat membuat elemen dengan class myscroll, pada HTMLnya sobat harus menentukan tinggi atau height, menambah kode overflow:hidden dan tambahkan jarak pinggir kanan padding-right:17px pada CSS terpisah atau inline (langsung pada HTML) seperti ini :

<div class='myscroll' style='height:200px;overflow:hidden;padding-right:17px'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti.
</div>

langkah selanjutnya tinggal menambahkan kode sesuai selektor pada jQuery baris ke 6 tadi. menjadi seperti ini :

$("html, .myscroll").niceScroll({cursoropacitymin:1,cursorcolor:"#808080",cursorborder:"1px solid #565656",background:"#ddd"});

Untuk menambahkan selektor, tinggal tambah pada jQuery di atas. Lebih mudah bukan?

Optional

Untuk browser, setelah penggunaan NiceScroll ini akan menampilkan default scrollbar terlebih dahulu, baru kemudian diganti dengan NiceScroll setelah JavaScript tereksekusi. Untuk blog yang lambat akan terlihat perubahannya. Sebagai pilihan, agar scrollbar tidak ditampilkan, maka tambahkan overflow:hidden pada body.

body {
....
....
....
overflow:hidden
}