Question

我想要实现的是让<canvas>元素在<div>内滚动，而不会覆盖页面上的任何部分。我一直在尝试将<canvas>元素插入到<div>中作为容器，但<canvas>永远不会被包含。

以下是Codepen的实例：CANVAS within DIV

以下是代码

HTML

<html lang="en">
<header>
    <meta charset="utf-8">
    <title>Latino Food Show Floor Map</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</header>

<body>
    <div id="main-container">
        <div id="canvas-container">
            <canvas></canvas>
            <script src="canvas.js"></script>
        </div>
        <div id="iframecontainer">
            <iframe name="boothinfo" src=""><p>Your browser does not support iframes.</p></iframe>
        </div>
    </div>
</body>
</html>

CSS

html {
overflow: auto;
}

body {
margin: 0;
padding: 0;
width: auto;
height: 1400px;
}

#main-container {
width:100%;
height:100%;
margin: 0;
padding: 0;
}

#canvas-container {
display:block;
width:69.5%;
height:900px;
float:left;
object-fit: contain;
}

#iframecontainer {
width:29.5%;
height:100%;
max-height: 1400px;
margin-top:-900px;
overflow:hidden;
float:right;
display:inline-block;
}

iframe {
margin:0;
padding: 0;
border: 1;
width:100%;
height:100%;
height: 1400px;
}

canvas {
border: 1px solid black;
width:100%;
}

有没有办法将<canvas>追加/插入<div>？

我这样做的方式不对吗？

Answer 1

我向您的父容器（iframecontainer）添加了溢出，并在iframe中添加了一个类，其中定义了float，with和height。希望能帮助到你。

CSS

 #iframecontainer {
 width:29.5%;
 height:100%; 
 max-height: 1400px;
 margin-top:-900px;
 overflow:hidden;
 float:right;
 display:inline-block;
 overflow:auto;
 }
 .iframeClass{
 width:100%;
 height:100%;
 float:left;
 }

HTML

 <iframe class="iframeClass" name="boothinfo" src=""><p>Your browser does not support iframes.</p></iframe>

Answer 2

只需将overflow:auto添加到您的div。

编辑： div是您希望拥有滚动条的div。在您的情况下，#canvas-container。

您的div未标有overflow样式，这意味着使用了默认值。 overflow的默认值为visible，这意味着容器的内容可以在父级范围之外显示。

在<div>中插入<canvas>

2 个答案: