让两个 div 共享同一个滚动条？答案

【问题标题】：Make two divs share the same scrollbar?让两个 div 共享同一个滚动条？
【发布时间】：2011-11-14 11:38:36
【问题描述】：

给定两个 div，它们代表嵌入在更大 div 中的列。如果 "!stuff" html 代表了许多超过容器高度的数据行，我该如何设置它使两个 col div 溢出并从 "container" 共享一个滚动条？

。容器 { 高度：100%；宽度：100%；溢出-x：隐藏；溢出-y：滚动；位置：相对；底部填充：30px； } .col1 { 高度：100%；宽度：50%；溢出-x：隐藏；溢出-y：可见；位置：相对；向左飘浮; } .col2 { 高度：100%；宽度：50%；溢出-x：隐藏；溢出-y：可见；位置：相对；浮动：对； }

<div class="container">
  <div class="col1">
    !Stuff<br/>
  </div>

  <div class="col2">
    !Stuff
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

您需要为容器设置一个固定的高度，否则它将自动调整大小以使列 div 适合其中。 overflow 属性应该只为容器设置，因为它是唯一可以滚动的元素：

.container {
    height: 300px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    padding-bottom: 30px;   
}

.col1 {
    height: 100%;
    width: 50%;
    position: relative;
    float: left;
}

.col2 {
    height: 100%;
    width: 50%;
    position: relative;
    float: right;
}

【讨论】：

【解决方案2】：

HTML

<div class="col2"  onscroll="OnScroll(this)">!Stuff</div>

javascript函数

function OnScroll(div) {
var div1 = document.getElementById("col1");
div1.scrollTop = div.scrollTop;}

【讨论】：