放大图像时添加滚动条

Question

我想在图片放大时添加滚动条。 我现在面临的问题是我的图像不完整，画布我可以移动图像，即使它没有放大或缩放。

我希望图像在画布上完好无损，当放大时，应该会出现滚动条。 我已经在CSS中将溢出添加到auto。

#container
{
    position: relative;
      overflow:auto;
}

http://jsfiddle.net/ndYdk/21/

有时图像最初不会显示，因此只需单击放大/缩小即可显示。

非常感谢任何帮助

Answer 1

你熟悉jsfiddle中的代码吗？它显式有“事件监听器来处理屏幕拖动”。如果您希望图像不会移动，请在放大时禁用它。

然而，滚动条的东西有点棘手。正确的解决方案是在overflow: scroll本身拥有<div id="container">和设置的高度/宽度，但是如果画布大小本身变大则会添加滚动条，而不是画布中的内容改变大小，他们知道。

当您检测到图像大于画布时，可以尝试手动添加滚动条。一种方法是：Canvas Scrollbar not working

但是，更简单的方法可能就是如上所述将大小限制和溢出放在父div上，然后更改画布的实际大小。

Answer 2

看起来canvas标签不支持溢出CSS规则，因为这不会强制显示浏览器的滚动：

<canvas id="myCanvas" style="overflow:scroll;" "></canvas>

Google中有一些有趣的主题可以帮助您完成任务： https://www.google.com/search?q=show+scroll+inside+canvas+tag