Membuat Scrollbar Berada Di Kiri - Ya, jadi seperti yang kita tahu, scrollbar selalu berada di kanan, tapi kali ini saya 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 user yang berkunjung dihalaman web kita jadi bingung
Hal yang harus dilakukan pertama kali adalah dengan membuat HTMLnya dulu:
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.
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
Setelah anda melihat demonya bagaimana apakah anda akan menerapkannya dihalaman web anda :)
Tujuannya hanya untuk bersenang-senang, tapi kalau ada yang ingin implementasikan di website bisa sih, tapi mungkin nanti user yang berkunjung dihalaman web kita jadi bingung
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>Kemudian, kita menambahkan judul ,meng-include jquery, menambahkan style dan basic markup
</body></html>
<!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>
$(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); }); });
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); });
Untuk lebih jelasnya lagi silahkan anda klik link dibawah ini untuk melihat demonya
Setelah anda melihat demonya bagaimana apakah anda akan menerapkannya dihalaman web anda :)
Mungkin sekian saja postingan dari kami semoga artikel ini dapat membantu anda semuanya.
HAPPY CODE and HAPPY BLOGGING
EmoticonEmoticon