Fake scrollbar on overflow: hidden
I have a large canvas wrapped inside a smaller div container with overflow hidden.
I would like to create a scrollbar (fake div / css or even canvas?) To move the position of the canvas inside the wrapper as if it were a real (overflowing: auto) scrollbar.
First, this is what I am trying to achieve, perhaps?
Is it possible to "move" my canvas position inside the wrapper using javascript?
Why a fake scrollbar?
-
The canvas is the "hotspot" area where the user can draw and move shapes.
-
Customized scrollbars do not work on ipad.
-
Customizing css
I've seen a lot of Jquery libs that do similar things, but they make the content draggable, whereas I want the scrollbar to be draggable.
Here's a demo of my attempt:
source to share
Yes, you just need the left position of the canvas to be relative to the left position of the horizontal scroll bar "bar" like this
Let W be the width of the canvas, D the width of the containing div and scrollbars, and B the width of the "bar" scrollbar. W> D
The initial value relative to the containing div to the left of the canvas is 0, and the "bar" to the left is 0 for the scrollbar.
The proportion of the visible canvas is D / W and therefore B = D * D / W
The range of the left edge of the "bar" is 0 - DB, and as the "bar" moves to the right, the canvas moves proportionally to the left.
let L be the current position of the "bar" from the left edge of the scrollbar, the fraction moved is L / D, and therefore the canvas is moved L * W / D to the left
those. when (bar) .style.left = L (canvas) .style.left = -L * W / D
Here is a fiddle using JQuery that will hopefully do what you need.
Javascript code shown below
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"} );
Note that the widths of the containing div, canvas, scrollbars, and lines are overwritten in the code, setting W and D so that it is easy to change these values.
source to share
To navigate a larger canvas, you can have your large canvas offscreen and then have a second screenshot of the canvas on screen.
The second canvas acts as a viewport to the larger canvas, displaying a portion of the larger canvas.
You can create a navigation system so that the user can scroll through a large canvas through the viewport.
Here's the code and fiddle: http://jsfiddle.net/m1erickson/BBwW8/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctxCanvas=canvas.getContext("2d");
var view=document.getElementById("view");
var ctxView=view.getContext("2d");
var col=0;
var row=0;
var img=new Image();
img.onload=function(){
ctxCanvas.drawImage(this,0,0,canvas.width,canvas.height);
drawToViewport();
}
img.src="http://www.gospelgifs.com/art_pages_15/imgs/house2.gif";
$("#left").click(left);
$("#right").click(right);
$("#up").click(up);
$("#down").click(down);
function drawToViewport(){
ctxView.clearRect(0,0,view.width,view.height);
ctxView.drawImage(canvas,
col*canvas.width/4,row*canvas.height/4,view.width,view.height,
0,0,view.width,view.height);
}
function right(){
if(col+1<=3){ col++; drawToViewport(); }
}
function left(){
if(col-1>=0){ col--; drawToViewport(); }
}
function down(){
if(row+1<=3){ row++; drawToViewport(); }
}
function up(){
if(row-1>=0){ row--; drawToViewport(); }
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br/>
<canvas id="view" width=97 height=67></canvas>
<button id="left">Left</button>
<button id="right">Right</button>
<button id="up">Up</button>
<button id="down">Down</button>
</body>
</html>
source to share