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個完全獨立的滾動條？

回答

相關問題