HTML/CSS如何获得2个完全独立的滚动条？
所以我编写了如下代码： （这是一个简化版的设计，我正在为一个网站做准备） HTML: 左侧是一个菜单，带有各种按钮，可以修改右侧的内容，但问题是： 当图像较大时，并非左侧的所有按钮都可以触及，现在就是这样。在这些时刻，我需要向下滚动右滚动条，否则无法到达左侧的所有元素。很明显，我希望这两个区域彼此独立，您只需向右滚动即可控制图像，而只需向左滚动即可控制菜单 我如何才能做到这一点？请尝试以下代码HTML/CSS如何获得2个完全独立的滚动条？,html,css,Html,Css,所以我编写了如下代码： （这是一个简化版的设计，我正在为一个网站做准备） HTML: 左侧是一个菜单，带有各种按钮，可以修改右侧的内容，但问题是： 当图像较大时，并非左侧的所有按钮都可以触及，现在就是这样。在这些时刻，我需要向下滚动右滚动条，否则无法到达左侧的所有元素。很明显，我希望这两个区域彼此独立，您只需向右滚动即可控制图像，而只需向左滚动即可控制菜单 我如何才能做到这一点？请尝试以下代码 <body> <!-- Main container to hold all
<body>
<!-- Main container to hold all sections and each section will have their own scrollbars -->
<div>
<!-- Left section with same height -->
<div style="height:300px; overflow:auto;float:left; width:45%;">
<div id="scroll">
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
</div>
</div>
<!-- Right section with same height -->
<div style="height:300px; overflow:auto;float:right; width:45%">
<div id="image"></div>
</div>
</div>
</body>
#thingy {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
#image {
width: 100px;
height: 800px;
background-color: blue;
}
.questionsTable {
width: 100%;
height: 100%;
}
#scroll {
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
}
<body>
<!-- Main container to hold all sections and each section will have their own scrollbars -->
<div>
<!-- Left section with same height -->
<div style="height:300px; overflow:auto;float:left; width:45%;">
<div id="scroll">
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
<div id="thingy"></div>
</div>
</div>
<!-- Right section with same height -->
<div style="height:300px; overflow:auto;float:right; width:45%">
<div id="image"></div>
</div>
</div>
</body>