Blog Kang Ismet

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

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.

Ada 3 step pemasangan yang harus sobat lakukan untuk memasang Tiny Scrollbar ini :

Tiny Scrollbar Plugin

https://rawcdn.githack.com/kangismet/javascript/b98b8f211bce0bb0e2f0f4cda3e04429bb4d8ff7/javascripts/jquery.tinyscrolbar.js

CSS

#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

<script type='text/javascript'>
//<![CDATA[
$('#scrollbar1').tinyscrollbar();
$('#scrollbar2').tinyscrollbar({ axis: 'x'});
//]]>
</script>

Cara Pemasangan

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>