Fake scroll bar on overflow: hidden

fabricjs, html, html5-canvas, scroll

Solution

Yes you just need to make the left position of the canvas relate to the left position of the horizontal scrollbar "bar" as follows

Let W be the width of the canvas, let D be the width of the containing div and the scrollbar and B the width of the scrollbar "bar". W>D

Initiall relative to the containing div the left of canvas is 0 and the "bar" has left=0 for the scrollbar.

The fraction of the canvas viewable is D/W and so B=D*D/W

The range of left hand edge of the "bar" is 0 to D-B and as the "bar" moves right the canvas moves left in proportion.

let L be the current position of the "bar" from the left hand edge of the scrollbar, the fraction moved is L/D and so the canvas moves L*W/D to the left

ie when (bar).style.left= L (canvas).style.left=-L*W/D

Here is a fiddle using JQuery that hopefully does what you require.

http://jsfiddle.net/GdsEa/

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 widths of containing div, canvas, scrollbar and bar are overwritten in the code by setting W and D so that it is easy to change these values.

Problem

I have a large canvas wrapped inside a smaller div container with overflow hidden. I would like to create a (fake div/css or even canvas ?) scrollbar to move the canvas position inside the wrapper as if it was a real (overflow: auto) scrollbar. First, is what I am trying ot achieve is feasible ? Can I 'move' my canvas position inside the wrapper with javascript ? Why a fake scrollbar ? The canvas is an 'active' area where the user can draw and move shapes. The native scrollbars do not work on ipad. Css customisation I saw plenty of Jquery libs doing similar things but they make the content draggable whereas I only want the scrollbar "bar" to be draggable. Here is a demo of my attempt: http://jsbin.com/otinuy/1/edit

Original source