Merubah Tampilan Scrollbar Dengan jQuery

Merubah Tampilan Scrollbar Dengan jQuery - Apa kabar sobat Tutorial? Pada kesempatan kali ini saya kembali lagi untuk berbagi tips seputar Dunia Blogging. Mungkin dari Judul postingan ini anda sudah tahu tips apa yang akan saya bagikan. :)

Merubah Tampilan Scrollbar Dengan jQuery - Pada kesempatan kali ini saya akan berbagi tips Merubah tampilan Scrollbar pada blog dengan Bantuan jQuery. Untuk yang penasaran silahkan disimak dibawah ini. :)

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} 

Dengan menggunakan CSS di atas, hanya support pada browser dengan komponen dasar WebKit seperti Safari, Chrome, browser iOS, Android dan Blackberry. Tetapi tidak support dengan browser lainnya seperti Mozilla, Opera dll.

Karena penggunaan CSS tidak support dengan semua browser, maka saya tawarkan penggunaan jQuery sebagai alternatifnya.  Untuk anda yang ingin mencoba langsung, silahkan disimak langkah-langkahnya dibawah ini lagi.. :)

Demo

Penggunaan NiceScroll

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

<script src='https://kang-is.googlecode.com/svn/trunk/javascript/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, tambahkan kode cursoropacitymin:1 menjadi :

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

Jika anda ingin mengganti Background, Merubah Warna Kursor, Dan Border. Anda bisa juga menambahkan kode berikut kedalam kode tadi.

• 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"});

 Bagaimana? Mudah bukan. :) Semoga bermanfaat, dan saya tunggu komentarnya.. :)