我有一个html5画布。我需要在div中显示它的固定部分（Div1）。当我在Div1里面滑动时，我需要滚动画布。所以当我滚动时，我会看到画布的相应部分。div内的可滚动画布
我想是这样的：
<div id="Div1" style=" float: left; width: 50px; overflow:hidden; ">
<canvas id="myCanvas1" width="200px" style="border: 1px solid #ff0000; position: absolute;">
</canvas>
</div>
设置高度希望它会帮助你
首先，你不应该使用overflow:hidden，你做
您需要使用 overflow-x: scroll;
基本上，你隐藏垂直滚动条，并使div的宽度大于页面。也不要使用canvas。只需使用嵌套的div。
此外，overflow-x:scroll真的不需要，因为它默认显示。
这样做：
HTML
<html>
<body>
<div id="container">
<div id="inner">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</body>
</html>
CSS
#container {
width: 100%;
height: 100%;
background: #fff;
}
#inner {
width: 2000px;
height: 300px;
margin: 0;
padding: 10px;
overflow-x: scroll;
overflow-y: hidden;
background: #ccc;
}
下面是它的jsfiddle工作： http://jsfiddle.net/mDr9r/
这是一个错误，user2284052似乎不存在。 – 2013-04-22 13:14:06
该问题具体询问如何滚动画布。说不使用画布的答案不是很多答案！ – pancake 2016-04-09 00:36:21
将无法正常工作（从内滚动的帆布div在某些'设计'条件下），首先你的溢出是隐藏。尝试在画布内滚动内容。
OR，试试这个：http://jsfiddle.net/9g3GG/2/
<div id="Div1" style=" float: left; width: 150px; overflow:scroll; ">
<canvas id="myCanvas1" width="200" style="border:1px solid #ff0000;">asdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdf</canvas>
</div>的div线被描绘。集线大小为0：
DIVofCanvas {
line-height: 0px;
}
更好地滚动到画布上，看到我的移相器插件：http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
下面是使用一个特大型帆布，并与通过调整CSS保证金鼠标移动滚动的演示： https://jsfiddle.net/ax7n8944/
HTML：
<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden">
<canvas id="canvas" width="10000px" height="250px"></canvas>
</div>
JS：
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var dragging = false;
var lastX;
var marginLeft = 0;
for (var i = 0; i < 1000; i++) {
context.beginPath();
context.arc(Math.random() * 10000, Math.random() * 250, 20.0, 0, 2 * Math.PI, false);
context.stroke();
}
canvas.addEventListener('mousedown', function(e) {
var evt = e || event;
dragging = true;
lastX = evt.clientX;
e.preventDefault();
}, false);
window.addEventListener('mousemove', function(e) {
var evt = e || event;
if (dragging) {
var delta = evt.clientX - lastX;
lastX = evt.clientX;
marginLeft += delta;
canvas.style.marginLeft = marginLeft + "px";
}
e.preventDefault();
}, false);
window.addEventListener('mouseup', function() {
dragging = false;
}, false);
什么不适合您的方法？ – 2013-04-21 06:37:58
@ KonstantinD-Infragistics，以及当我滑动，我不知道，如何移动画布..此外，我需要滚动而不显示水平滚动条到'Div1' – benjamin54 2013-04-21 06:40:08
当您滚动更改相应的边距。 – 2013-04-21 06:45:21