在放大图像时添加滚动条 [英] Add A scrollbar when image is zoomed in

问题描述

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

I am trying to add a scroll bar when the image zoom in. The problem I am facing now is my image is not intact with the canvas I can move the image around even if its not zoomed in or scaled.

我想要的图像是完整的画布，当它放大，滚动条应该出现。
我在CSS中添加了溢出到自动。

I want the image to be intact to the canvas and when its zoom in, the scroll bar should appear. I have added the overflow to auto in the CSS.

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

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

有时图片不显示，所以只需点击放大

Sometimes the image doesnt appear at first so just click zoom in/out and it will appear.

推荐答案

您熟悉jsfiddle中的代码吗？它显式具有处理屏幕拖动的事件侦听器。如果你想要图像不移动，放大时禁用它。

Are you familiar with the code in the jsfiddle? It explicit has "event listeners to handle screen drag." If you want the image to not move around, disable that when you are zoomed in.

但是，滚动条的东西有点棘手。正确的解决方案是在< div id =container> 中设置 overflow：scroll c $ c>本身，然而，如果画布尺寸本身变大，而不是如果画布中的内容改变尺寸，这将增加一个滚动条，因为他们知道。

However, the thing with the scrollbar is a bit trickier. The correct solution would be having the overflow: scroll and a set height/width in your <div id="container"> itself, however this would add a scrollbar if the canvas size itself got bigger, not if the contents in the canvas changed size, as they do know.

当您检测到图片大于画布时，您可以尝试手动添加滚动条。其中一种方法是： Canvas滚动条无效

You could try to add scrollbars manually when you detect your image is larger than your canvas. one way to do that is here: Canvas Scrollbar not working

但是，一个更简单的方法可能是把尺寸约束和溢出放在父div上，如上所述，然后改变画布的实际尺寸。

However, an easier way may be to just put the size constraints and overflow on your parent div as I said above and then change the actual size of the canvas.

这篇关于在放大图像时添加滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！