Cara Membuat jQuery Cross Browser Custom ScrollBar

Cara Membuat 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. Saya sendiri menggunakan FleXcroll untuk notifikasi komentar. Namun saat ini saya akan membuat tutorial cara membuat custom scrollbar untuk blogger dengan Tiny Scrollbar, karena untuk penggunaan FleXcroll untuk banyak website harus menggunakan plugin berbayar.

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

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

Tiny Scrollbar Plugin

Simpan kode ini di atas </head>

<script src='https://kang-is.googlecode.com/svn/trunk/javascript/tinyscrollbar.js' type='text/javascript'/>

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.