Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> DEMO | Scrollbar di kiri!</title>    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    $(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);
});
});
    </script>
    </head>
<body>
    <div id="s">
        <div id="is"></div>
    </div>
    <div id="wrapper">
    <br><br>
        <h1 style="margin-left:-300px;">&larr; Hey, lihat! Scrollbarnya udah di kiri</h1>
        <br>
        <h1 style="margin-left:225px;">Dihalaman ini tidak ada scrollbar di kanan &rarr;</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>
 
<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>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers