我试图在图像放大时添加滚动条。我现在面临的问题是我的图像是不完整的画布,我可以移动图像周围,即使它没有放大或缩放。
我希望图像对画布是完整的,当它放大时,滚动条应该出现。我在CSS中添加了自动溢出
#container
{
position: relative;
overflow:auto;
}
http://jsfiddle.net/ndYdk/21/有时图像一开始不出现,所以只需点击放大/缩小,它就会出现。
任何帮助都非常感谢
您熟悉jsfiddle中的代码吗?它显式地具有"处理屏幕拖动的事件侦听器"。如果您希望图像不移动,请在放大时禁用该功能。
然而,滚动条的事情有点棘手。正确的解决方案是在<div id="container">
本身中设置overflow: scroll
和高度/宽度,但是如果画布大小本身变大,则会添加滚动条,而不是画布中的内容改变大小,正如他们所知道的那样。
当您检测到图像大于画布时,可以尝试手动添加滚动条。一种方法是:Canvas滚动条不工作
然而,一个更简单的方法可能是在你的父div上设置大小限制和溢出,然后改变画布的实际大小。
看起来canvas标签不支持溢出CSS规则,因为这不会强制浏览器显示滚动条:
<canvas id="myCanvas" style="overflow:scroll;" "></canvas>
在谷歌有一些有趣的话题可以帮助你完成你的任务:https://www.google.com/search?q=show +滚动画布+在+ +标签