jQuery Cross Browser Custom ScrollBar / TinyScrollbar
Custom Scrollbar untuk Blogger dengan Tiny ScrollBar - Kali ini saya akan berbagi custom scrollbar dengan jQuery. Tentunya sesuai dengan judul, custom scrollbar ini berjalan di berbagai browser. Banyak plugin jQuery untuk custom scrollbar ini, diantaranya : Tiny Scrollbar, FleXcroll, VertiScroll, jScrollPane, Perfect Scrollbar, dll. . Saat ini saya akan membuat tutorial cara membuat custom scrollbar untuk blogger dengan Tiny Scrollbar
Diupdate tanggal: 4 Mei 2021
Kelebihan Tiny Scrollbar diantaranya tidak merubah scrollbar standar dengan jQuery, melainkan membuat scrollbar sendiri. Berbeda dengan FleXcroll yang saya gunakan, sebelum jQuery tereksekusi, maka akan ditampiklan scrollbar standar. Tetapi, tentu saja ada kekurangan dan kelebihan apabila dibandingkan dengan yang lainnya.
Demo TinyScrollbar
Ada 3 step pemasangan yang harus sobat lakukan untuk memasang Tiny Scrollbar ini :
Tiny Scrollbar Plugin
Simpan kode ini di atas</head>
https://rawcdn.githack.com/kangismet/javascript/b98b8f211bce0bb0e2f0f4cda3e04429bb4d8ff7/javascripts/jquery.tinyscrolbar.jsCSS
Simpan CSS ini di atas]]></b:skin> atau </style>
#scrollbar1 { width: 100%; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 97%; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #666; }
#scrollbar1 .scrollbar { background-color: #d3d3d3; position: relative; float: right; width: 6px; border-radius:3px }
#scrollbar1 .track { background-color: #d3d3d3; height: 100%; width:6px; position: relative; padding: 0; border-radius:3px}
#scrollbar1 .thumb { height: 20px; width: 6px; cursor: pointer; overflow: hidden; position: absolute; top: 0; border-radius:3px}
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 6px; }
#scrollbar1 .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
#scrollbar2 { width: 251px; margin: 20px 0 10px; }
#scrollbar2 .viewport { width: 236px; height: 125px; overflow: hidden; position: relative; }
#scrollbar2 .overview { list-style: none; width: 1416px; padding: 0; margin: 0; position: absolute; left: 0; top: 0; }
#scrollbar2 .overview img{ float: left; }
#scrollbar2 .scrollbar{ background-color: #d3d3d3; position: relative; margin: 0 0 5px; clear: both; height: 6px;border-radius:3px }
#scrollbar2 .track { background-color: #d3d3d3; width: 100%; height:6px; position: relative;border-radius:3px }
#scrollbar2 .thumb { background-color: #666; height: 6px; cursor: pointer; overflow: hidden; position: absolute; left: 0; border-radius:3px}
#scrollbar2 .thumb .end{overflow: hidden; height: 6px; width: 5px;border-radius:3px}
#scrollbar2 .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }jQuery Pemicu
JQuery ini untuk mengaktifkanid tertentu, alam hal ini scrollbar1 dan scrollbar2. Simpan kode di atas </body>
<script type='text/javascript'>
//<![CDATA[
$('#scrollbar1').tinyscrollbar();
$('#scrollbar2').tinyscrollbar({ axis: 'x'});
//]]>
</script>Cara Pemasangan
Untuk pemasangan saya gunakan 2 custom scrollbar yaitu Vertical dan Horizontal seperti pada demo. Untuk vertical dengan#scrollbar1 dan Horizontal dengan #scrollbar2
Kode HTML untuk Pemasangan Tiny Scrollbar
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
Isi yang akan discrol di sini
</div>
</div>
</div>Nantinya sobat bisa membuat style baru dengan menambahkan CSS, jQuery pemicu dan kode HTML dengan
id yang berbeda.
61 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
"Mohon bersabar untuk menunggu jawaban, dan jangan mengulang-ulang pertanyaan pada artikel yang lain karena banyak pertanyaan yang yang harus saya jawab. Untuk menjawab pertanyaan, saya tidak bisa asal-asalan, untuk hal yang baru saya harus melakukan ujicoba terlebih dahulu, dan itu memakan waktu.
Terimakasih atas pengertiannya...
Satu hal lagi... ada beberapa pertanyaan yang tidak bisa saya reply. Oleh karena itu aktifkan reply pada GooglePlus sobat, agar pertanyaan bisa saya balas."
kode ini taro di mananya yah heheh maaf newbie
.cm-outer::-webkit-scrollbar{width:5px;background:#aaa}
.cm-outer::-webkit-scrollbar-thumb{background-color:#666;border-radius:3px}
- salam damai
maaf kang, bukan berarti ngejek, mungkin daya seni design saya yang minim jadi gk bisa menilai kelebihan dari ini scroll :D
blog saya jg pake yang css scrollbar tapi cm support di chrome, kl yg ini sudah cross browser hehe.. :-d
mantab, mantab.
ijin menghabiskan sarapannnya kang
trimakasih banyang kang
tutorialnya..