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

Artikel ini dipublikasikan tanggal : 29 Desember 2013
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.js

CSS

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 mengaktifkan id 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.

Tutorial ini adalah request dari Leony Li, sobat juga bisa request tutorial DISINI. Untuk berkomentar di luar topik bahasan, silahkan gunakan juga halaman OOT.