custom scrollbar
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}

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. Sebetulnya penggunaan custom scrol ini telah saya buat dalam posting sebelumnya yanitu 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.

ask scrollbar

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


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

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
}

Sumber : http://areaaperta.com/nicescroll/

63 komentar

wah.. ini mantap kang :)

Balas

ijin mempelajari ya kang
mksh tutorialnya

Balas

ijin menimba ilmu kang, malem-malem semangat amat ngepost, hehehe :)

Balas

wah ini yang saya tunggu, langsung diterapkan. trims KI

Balas

Mau comment lain tp ini, jangan di hapus kang , karna gak tau comment dmana soal nya , cara buat jam kaya akang gmna ? yang menuju 2014

Balas

saya juga ijin nyimak ya kang karena 3 hari gak berkunjung kesini :D

Balas

Dicoba dulu kang,, sepertinya ini lebih mantab dari yg sebelumnya :)

Balas

saya raosan dulu kang bisi kirang uyah hahahay

Balas

untuk optional, saya pakai overflow:auto
biar pas loading scroll, halaman masih tetap terbuka :)

Balas

sekalian kang saya ucapkan selamat tahun baru semoga KI makin sukses dan jaya di udara haha

Balas

Akhirnya penantian ini tidak sia-sia. Hatur nuhun Kang, langsung test drive :)

0 HARI 17 JAM 6 MENIT 37 DETIK MENUJU 2014


Balas

Ciyeeee sayah kapelem yeuuhh... hehheheh...
Tah sigana ieu mah harus dicobian kang heheeheh hatur nuhun ah...
Wilujeng Taun Enggal 2014, mudah-mudahan KI sekeluarga salawasna sehat, tambih sukses sareng aya dina lindungan-Na...amiin

Balas

saya yang sederhana saja, yang pertama aja kang tanpa oprek yang lainya :D hehe

Balas

Mudah-mudahan komentar saya yg ini gk dihapus lagi, hehe
Keren kang, ada efeknya gitu, tapi saya ingin scrollbar yang default dari browsernya dan menggunakan efek, hehe gimana kang?

Balas

mau scrollbar default tapi ada efek? apaan sih maksudnya?????????????? @@,

Balas

saya ingin memasang efeknya doang, ngga dengan CSSnya

Balas

silahkan di simak baik2 ya :D

Balas

iya ketemu juga yang simple dan powerfull

Balas

hehehhe... cuma sempet mosting, ga sempet bales:D

Balas

hehehe...sebentar lagi say buat tutornya :D

Balas

menurut saya juga gitu.. lebih powerfull

Balas

amiiin... dasar penyiar nya.. jaya di udara :D

Balas

enya kang sok panasaran mun can kapendak teh

Balas

tapi saya baca komentar adan dan bukan itu maksudnya..

Balas

janten bentang pelem atuh nya... nuhun kana pangdu'ana kang... mugia kang Adhy sakulawargi oge aya dina ginanjar kawilujengan

Balas

hehehe... boleh lah berbagai pilihan sob

Balas

saya semalem juga sudah pasang hehehe.. :)

Balas

efek seperti ini memang banyak dicari ya kang sukur kang ismet bisa kasih alternatif selain menggunakan CSS

met taon baru kang sukses trus buat akang :)

Balas

iya bang support semua browser

Balas

sama2 sob... met taun baru juga

Balas

Nyimak aja ah, karena lebih suka scrollbar standar. Btw, perbincangan di G+ can beres kang. Hayang buru-buru ganti domain :D

Balas

Intinya untuk memperindah tampilan blog ya kang, bagus nih :) Salam sukses

Balas

terima kasih gan atas infonya,. sangat bermanfaat,.
Di tunggu gan kunjungan baliknya http:// ekoariw27. blogspot.com/
Bagus juga blog agan ada link iklannya...
kapan2 sy mau buat spt ini juga

Balas

wah penemuan baru nih, makasih udah share kang :D

Balas

Kan Kang Ismet itu Professor :D

Balas

mantafffff :D
izin sedottttttt :v

Balas

boleh juga ni kang,.
buat mempercantik blog newbie ane :D

Balas

iya kang nicescroll bagus kang.. saya juga pasang jquery tersebut, karena halaman juga lebih smooth saat di scroll, sebenarnya banyak sekali plugin scroll, tapi yang bisa untuk mengganti scroll browser dan hasilnya memuaskan cuma nicescroll, costumscrollbar juga bagus dan lebih smooth tapi sayang hanya terbatas pada beberapa element saja. ini ada animasi scrollable bagus kang tapi saya bingung mau diterapin di blog untuk apa heheh http://johnpolacek.github.io/superscrollorama/

Balas

Terimakasih kang info yg sangat bermanfaat...banyak ilmu disini yang di share yang bermanfaat bagi blogger semua pastinya. sukses slalu kang.

Balas

nah ini yang di cari kang.. thanks tipsnya. bisa dipakai utk blogger juga kah?

Balas

Ngges 4x menang pertamaxx kang, alhamdulilah wae abdi mah :D :ngaka

Balas

pan teu bisa atuh emoticonna, ceuk deui atuh :ngakak

Balas

Naha ieu, pan teu bisa emoticonna :D

Balas

Udah di coba ini kang, tapi makasih banyak ya :)

Balas

Saya gak berhasil kang. Menambah property "overflow:hidden" malah biki scroll di blog saya hilang, dana menggunakan "overflow:auto" sama saja tampilan scrollnya.

Balas
Komentar ini telah dihapus oleh pengarang.

Makasih, Kang! Nambah ilmu, dikit-dikit.. :D

Balas

trims bgt sebelumnya kang atas sharing scroll yg maknyus ini. saya jg udh lama mengidamkannya hehehe...
btw kalau mau pasang scroll yg imut begini cuma di widget tertentu aja dgn scroll browsernya tetap gmn caranya yo kang?
mohon pencerahannya, trims bg sebelumnya.
Moga kang Is dan para sobat semua senantiasa sehat dan hepi yo... :)

Balas

Wah, ini versi jquery nya... makasih kang buat tutorialnya :D

Balas

Langsung dipraktekin z kang.. sip ah..

Balas

Sipp keren langsung ane coba y Kang.. :-bd

Balas

wah terimakasih infonya, salam kenal :)

Balas

pengen bisa pasang Jquery di web..

Balas

Poskan Komentar


×
Chat