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

给定两个div，它们表示嵌入在较大div中的列。如果“！stuff”html表示超过容器高度的多行数据，我如何设置它，使两个col div溢出并共享“container”中的一个滚动条

.集装箱{ 身高：100%； 宽度：100%； 溢出x：隐藏； 溢出y：滚动； 位置：相对位置； 填充底部：30px； } .col1{ 身高：100%； 宽度：50%； 溢出x：隐藏； 溢出y：可见； 位置：相对位置； 浮动：左； } .col2{ 身高：100%； 宽度：50%； 溢出x：隐藏； 溢出y：可见； 位置：相对位置； 浮动：对； }

!东西

!东西

您需要为容器设置一个固定的高度，否则它将自动调整大小，以使列div适合内部。应仅为容器设置

溢出

属性，因为它是将滚动的唯一元素：

.container{
高度：300px；
宽度：100%；
溢出x：隐藏；
溢出y：滚动；
位置：相对位置；
填充底部：30px；
}
.col1{
身高：100%；
宽度：50%；
位置：相对位置；
浮动：左；
}
.col2{
身高：100%；
宽度：50%；
位置：相对位置；
浮动：对；
}

Html

.container { height: 100%; width: 100%; overflow-x: hidden; overflow-y: scroll; position: relative; padding-bottom: 30px; } .col1 { height: 100%; width: 50%; overflow-x: hidden; overflow-y: visible; position: relative; float: left; } .col2 { height: 100%; width: 50%; overflow-x: hidden; overflow-y: visible; position: relative; float: right; }

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

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

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

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