带滚动条的 HTML 画布

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15461811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 06:35:28  来源:igfitidea点击:

HTML canvas with scrollbar

htmlcsscanvasscrollbar

提问by madu

I am drawing graphs on canvases which have large unequal widths. Is it possible for each canvas to have its own scrollbar? I tried to put all the canvases in one div and specify a max-width but it didn't work. Is it possible for all the canvases to be say 500px in visible width on the page and each has its scrollbar to view the entire width of the canvas.

我在宽度不等的画布上绘制图形。每个画布都可以有自己的滚动条吗?我试图将所有画布放在一个 div 中并指定一个最大宽度,但没有用。是否有可能所有画布在页面上的可见宽度都是 500 像素,并且每个画布都有自己的滚动条来查看画布的整个宽度。

Thank you.

谢谢你。

回答by James Coyle

Specify the total width of the canvas then wrap it in a div. Set the div to overflow: scrolland give that the 500px width. You should then have scrollbars allowing you to scroll and see the hidden parts of the canvas. Repeat this for all of the canvases.

指定画布的总宽度,然后将其包裹在一个 div 中。将 div 设置为overflow: scroll500px 宽度。然后你应该有滚动条,允许你滚动并查看画布的隐藏部分。对所有画布重复此操作。

<div style="max-height: 256px;max-width:256px;overflow: scroll;">
          <canvas width="512px" height="512px"></canvas>
</div>