使两个div共享同一个滚动条？

Question

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

.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>

- MikeN

Answer 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;
}

- Michał Wojciechowski

Answer 2

Html

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

Javascript函数

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

- ShadowUC