html - 溢出时的假滚动条 : hidden

Question

我有一个大 Canvas 包裹在一个较小的 div 容器中，隐藏了溢出。

我想创建一个(假的 div/css 或什至 Canvas ？)滚动条来移动包装器内的 Canvas 位置，就好像它是一个真正的(溢出:自动)滚动条一样。

首先，我尝试实现的目标是否可行？

我可以使用 javascript 在包装器中“移动”我的 Canvas 位置吗？

为什么要假滚动条？

• Canvas 是一个“事件”区域，用户可以在其中绘制和移动形状。

• 原生滚动条在 ipad 上不起作用。

• 自定义CSS

我看到很多 Jquery 库都在做类似的事情，但它们使内容可拖动，而我只希望滚动条“bar”可拖动。

这是我尝试的演示:

http://jsbin.com/otinuy/1/edit

Answer 1

是的，你只需要使 Canvas 的左侧位置与水平滚动条“bar”的左侧位置相关，如下所示

令 W 为 Canvas 的宽度，令 D 为包含的 div 和滚动条的宽度，B 为滚动条“bar”的宽度。 W>D

初始相对于包含的 div， Canvas 的左侧为 0，滚动条的“bar”已 left=0。

Canvas 可见部分是 D/W，所以 B=D*D/W

“条形”左边缘的范围是 0 到 D-B，随着“条形”向右移动， Canvas 按比例向左移动。

设 L 为滚动条左侧边缘的“条”的当前位置，移动的分数为 L/D，因此 Canvas 向左移动 L*W/D

即当 (bar).style.left= L (canvas).style.left=-L*W/D

这是一个使用 JQuery 的 fiddle ，希望能满足您的要求。

http://jsfiddle.net/GdsEa/

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、canvas、scrollbar 和 bar 的宽度在代码中通过设置 W 和 D 被覆盖，因此很容易更改这些值。