Untuk membuat custom scrollbar selalu merupakan pekerjaan menantang bagi web designer, berikut adalah salah satu contoh sederhana dengan kode JavaScript.
Sediakan javasript jsScroller dan jsscrollbar. jsScroller adalah sebuah instance dari jsScroller.js, scrollbarContainer adalah elemen yang berisi semua komponen untuk scrollbar, nilai yang diisi adalah nilai boolean, ketika diatur ke null membuat ada scrollbar.
Javascript:
<script type=”text/javascript” src=”js/jsScroller.js”></script>
<script type=”text/javascript” src=”js/jsScrollbar.js”></script>
<script type=”text/javascript”>
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById(“Scroller-1”), 400, 200);
scrollbar = new jsScrollbar (document.getElementById(“Scrollbar-Container”), scroller, false);
}
</script>
Css:
.Container {
position: absolute;
width: 630px;
height: 300px;
background: transparent;
}
#Scroller-1 {
position: absolute;
overflow: hidden;
width: 630px;
height: 300px;
}
#Scroller-1 p {
margin: 0; padding: 10px 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.Scroller-Container {
position: absolute;
top: 0px; left: 0px;
}
.Scrollbar-Up {
cursor: pointer;
position: absolute;
top: -10px; right: -30px;
}
.Scrollbar-Down {
cursor: pointer;
position: absolute;
top: 280px; right: -30px;
}
Hasilnya bisa di klik berikut ini:
custom-scrollbar
Kunjungi www.proweb.co.id untuk menambah wawasan anda.