Fake scroll bars in browser - Javascript Canvas Reference

Javascript examples for Canvas Reference:lineTo

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. lineTo

Description

Fake scroll bars in browser

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.0.0b1.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
      <style id="compiled-css" type="text/css">

div,canvas {//w ww.j a va  2 s . c  o  m
   position:absolute;
}
.wrapper {
   top:10px;
   left:10px;
   width: 500px;
   height: 300px;
   border: 2px solid black;
   margin:30px 0 2 ;
   overflow: hidden;
}
.horizontal-scroll {
   left:10px;
   top:350px;
   border: 1px solid black;
   width: 500px;
   height: 20px;
}
.horizontal-scroll div.bar {
   left:0px;
   top:0px;
   width: 30px;
   background-color: red;
   height: 20px;
}
#mycanvas {
   left:0px;
   top:0px;
   background-color:yellow;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var W=2000;
var D=500;
var B=D*D/W;
document.getElementById("wrap1").style.width=D+"px";
document.getElementById("hbar").style.width=B+"px";
var canv=document.getElementById("mycanvas");
canv.width=W;
var ctx=canv.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.closePath();
ctx.fillStyle="rgb(255,0,0)";
ctx.fill();
ctx.beginPath();
ctx.moveTo(W-100,100);
ctx.lineTo(W,100);
ctx.lineTo(W,200);
ctx.lineTo(W-100,200);
ctx.closePath();
ctx.fillStyle="rgb(0,0,255)";
ctx.fill();
$( ".bar" ).draggable({ containment:"parent" });
$( ".bar" ).on( "drag", function( event, ui ) {var L=ui.position.left;
                                               canv.style.left=(-L*W/D)+"px"} );
    });

      </script> 
   </head> 
   <body> 
      <div class="wrapper" id="wrap1"> 
         <canvas id="mycanvas" width="1000px" height="1000px"></canvas> 
      </div> 
      <div class="horizontal-scroll" id="hscroll"> 
         <div class="bar" id="hbar"></div> 
      </div>  
   </body>
</html>

Related Tutorials