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如果图像很大，现在就是这种情况。在那些时刻，我需要向下滚动右侧滚动条，否则不能到达左侧的所有元素。我显然希望这两个区域彼此独立，您只需在右侧滚动以控制图像，而您只需滚动左侧即可控制菜单。

我该怎么做？

来源

2014-08-28 Jan Nowak

试试下面的代码

<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-28 11:58:14 Rajesh

可以使用一些细化，但它的作品，谢谢:) – 2014-08-31 13:46:56

HTML/CSS如何获得2个完全独立的滚动条？

回答

相关问题