HTML/CSS如何获得2个完全独立的滚动条?
问题描述:
所以我编写这样的事: http://jsfiddle.net/6ck393z8/ (这是一个设计的简化版本,我准备一个网站)HTML/CSS如何获得2个完全独立的滚动条?
HTML:
<table class="questionsTable">
<col width="100" />
<tr>
<td class="questionsList" rowspan="1">
<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>
</td>
<td height="auto">
<div id="image"></div>
</td>
</tr>
</table>
CSS:
#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%;
}
左侧是一个菜单,其中包含各种按钮,用于修改右侧的内容,但问题如下: 并非左侧所有按钮都可以到达w如果图像很大,现在就是这种情况。在那些时刻,我需要向下滚动右侧滚动条,否则不能到达左侧的所有元素。我显然希望这两个区域彼此独立,您只需在右侧滚动以控制图像,而您只需滚动左侧即可控制菜单。
我该怎么做?
答
试试下面的代码
<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>
可以使用一些细化,但它的作品,谢谢:) – 2014-08-31 13:46:56