我有一个大画布包裹在一个较小的 div 容器中，并隐藏了溢出。
我想创建一个（假的 div/css 甚至画布？）滚动条来移动包装器内的画布位置，就好像它是一个真正的（溢出：自动）滚动条一样。
首先，我想要实现的目标可行吗？
我可以使用 javascript 在包装器内“移动”我的画布位置吗？
为什么是假滚动条？
画布是一个“活动”区域，用户可以在其中绘制和移动形状。
原生滚动条在 ipad 上不起作用。
Css 自定义
我看到很多 Jquery 库都在做类似的事情，但它们使内容可拖动，而我只希望滚动条“栏”可拖动。
这是我尝试的演示：
【问题讨论】：
标签： html scroll html5-canvas fabricjs
是的，您只需要使画布的左侧位置与水平滚动条“条”的左侧位置相关，如下所示
令 W 为画布的宽度，令 D 为包含 div 和滚动条的宽度，B 为滚动条“条”的宽度。 W>D
相对于包含 div 的初始值，画布左侧为 0，并且“栏”对于滚动条具有 left=0。
可查看的画布部分是 D/W，因此 B=D*D/W
“条”左侧边缘的范围是 0 到 D-B，随着“条”向右移动，画布按比例向左移动。
令 L 为“条”从滚动条左侧边缘的当前位置，移动的分数为 L/D，因此画布向左移动 L*W/D
即当 (bar).style.left= L (canvas).style.left=-L*W/D
这是一个使用 JQuery 的小提琴，希望能满足您的要求。
如下所示的Javascript代码
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"} );
注意包含div、画布、滚动条和条的宽度在代码中通过设置W和D被覆盖，以便于更改这些值。
【讨论】：
要在大于屏幕的画布上导航，您可以将大画布放在屏幕外，然后在屏幕上放置第二个较小的画布。
通过显示较大画布的部分，第二个画布就像一个进入较大画布的视口。
您可以创建导航系统以允许用户通过视口滚动浏览更大的画布。
这是代码和小提琴：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>
【讨论】：