当图像放大时添加滚动条

Add A scrollbar when image is zoomed in

本文关键字：添加 滚动条 放大 图像      更新时间：2023-09-26

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

我希望图像对画布是完整的，当它放大时，滚动条应该出现。我在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 +滚动画布+在+ +标签

相关文章：