html5自动出现滚动条,html5 – 溢出时的假滚动条：隐藏

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

设W为画布的宽度,让D为包含div和滚动条的宽度,B为滚动条“bar”的宽度.并且R w d

相对于包含div的Initiall,画布的左边是0,滚动条的“bar”左边= 0.

可见画布的分数是D / W,因此B = D * D / W.

“bar”的左手边缘范围是0到D-B,当“bar”向右移动时,画布按比例向左移动.

令L为滚动条左侧边缘的“条形”的当前位置,移动的分数为L / D,因此画布向左移动L * W / D.

即当(bar).style.left = L(画布).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"} );

请注意,通过设置W和D可以在代码中覆盖包含div,画布,滚动条和条的宽度,以便更改这些值.