Make two divs share the same scrollbar?

Given two divs that represent columns embedded in a larger div. If the "!stuff" html represents many rows of data that would exceed the height of container, how do I set it up so the two col div's will overflow and share one scrollbar from "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>

---

You need to set a fixed height for the container, otherwise it will be automatically resized so that the column divs fit inside. The overflow property should only be set for the container, as it is the only element that will be scrolled:

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

---

Html

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

javascript function

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