Ya, jadi seperti yang kita tahu, scrollbar selalu berada di kanan, tapi kali ini ane akan mengajarkan cara membuat scrollbar agar tampil di bagian kiri website dan bukan bagian kanan website
Tujuannya hanya untuk bersenang-senang, tapi kalau ada yang ingin implementasikan di website bisa sih, tapi mungkin nanti usernya bingung
Live demo bisa diakses disini, jangan khawatir, ane akan tunggu kok
Sudah? Gimana pendapatnya? Sudah penasaran ingin tahu caranya? Kalau iya, silahkan lanjutkan membaca
Hal yang harus dilakukan pertama kali adalah dengan membuat HTMLnya dulu:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
Kemudian, kita menambahkan judul ,meng-include jquery, menambahkan style dan basic markup
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollbar di kiri!</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
overflow:hidden;
text-align:center;
font-family:calibri, arial;
}
#wrapper {
width:1006px;
position:absolute;
left:50%;
margin-left:-495px;
z-index:1;
}
#s {
height:100%;
width:18px;
overflow-y:scroll;
position:fixed;
left:0%;
margin-left:-2px;
z-index:99999999999;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script></head>
<body>
<div id="s">
<div id="is"></div>
</div>
<div id="wrapper">
<br><br>
<h1 style="margin-left:-300px;">← Hey, lihat! Scrollbarnya udah di kiri</h1>
<br>
<h1 style="margin-left:225px;">Dihalaman ini tidak ada scrollbar di kanan →</h1>
<br><br>
<div style="margin: 1em 300px; text-align:justify;" contenteditable="true">-- Disini hanya dummy text --</div>
<br><br>
<small><i>*namanya juga bukan scrollbar asli, jadi pasti ada tetap ada bug-nya<br>karena scrollbar palsu jadi scrollbarnya bisa di<a href="javascript:void(0);" class="move">geser</a> gitu :D</i></small><br><Br><br><br>
</div>
</body>
</html>
Mungkin ada yang bertanya, apa guna dari div yang ber-id "s" dan div yan ber-id "is". Nah, itulah "core" dari kode tersebut. Mungkin akan lebih jelas kalau kode javascriptnya dilihat dulu.
$(document).ready(function() {
function scrollbar() {
var wrapper=$("#wrapper").css("height");
$("#is").css("height",wrapper);
var st=$("body").scrollTop();
$('#s').scrollTop(st);
setTimeout(scrollbar, 1);
}
setTimeout(scrollbar, 1);
$("#s").scroll(function() {
var st=$("#s").scrollTop();
$('html, body').scrollTop(st);
});
$(".move").click(function() {
$("#s").animate({
left:100
}, 100);
});
});
Saya akan menjelaskan kode tersebut dan sambil menjelaskan bagaimana teknik yang digunakan
Jika kita melihat kode javascript itu, maka kode yang dieksekusi pad asaat halaman di load hanyalah funsi scrollbar yang akan dijalankan 1 millisecond setelah halaman diload (sebenarnya bisa langsung kok panggil functionnya tanpa setTimeout, cuma karena entah mengapa waktu itu otak ane error [soalnya kode ini dibuat beberapa waktu lalu] jadi ane kasih setTimeout deh :hammers)
Mari kita lihat isi dari function scrollbar()
var wrapper=$("#wrapper").css("height"); jadi tinggi dari dokumen (yang berada didalam div ber-id 'wrapper") dimasukkan dalam sebuah variabel bernama wrapper. Apa gunanya? Nanti kita akan lihat
$("#is").css("height",wrapper); seperti yang ane katakan sebelumnya, div "s" dan "is" adalah inti dari kode ini, jadi div "is" akan dibuat tingginya sama dengan tinggi dokumen, sehingga muncul scrollbar yang sama jika dibandingkan dengan scrollbar "asli". Darimana scrollbarnya muncul? Coba perhatikan lagi cssnya ;)
var st=$("body").scrollTop(); sebenarnya baris ini (dan baris selanjutnya) untuk mengantisipasi jika dokumennya discroll dengan cara lain (alias tidak menggunakan scrollbar palsu tersebut). Jadi scrollbar palsunya bisa "menyesuaikan diri". Emang agak sulit sih dijelaskan dengan kata-kata
$('#s').scrollTop(st); nah, kode ini membuat div "s" ter-scroll secara otomatis jika dokumennya discroll tanpa menggeser si scrollbar palsu
setTimeout(scrollbar, 1); ini gunanya untuk mengeksekusi fungsi scrollbar lagi agar semuanya berjalan dengan baik :D
$("#s").scroll(function() {
var st=$("#s").scrollTop();
$('html, body').scrollTop(st);
});
Kode ini berfungsi untuk mengscroll dokumen jika scrollbar palsunya digeser
$(".move").click(function() {
$("#s").animate({
left:100
}, 100);
});
Yang ini cuman "just for fun" kok :D
Sekian tutorial dari ane, maaf kalau bulepotan berlepotan, tapi ane sudah berusaha agar post ini bisa dimengerti
Semoga bermanfaat
