Zwei Divs sollen die gleiche Bildlaufleiste haben?

Question

Gegeben zwei divs, die Spalten in einem größeren div eingebettet darstellen. Wenn die "!stuff" html stellt viele Zeilen von Daten, die die Höhe des Containers überschreiten würde, wie kann ich es einrichten, so dass die beiden Spalten divs wird überlaufen und teilen eine Bildlaufleiste von "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>

Answer 1

Sie müssen eine feste Höhe für den Container festlegen, da er sonst automatisch in der Größe angepasst wird, damit die Spalten-Divs hineinpassen. Die overflow sollte nur für den Container festgelegt werden, da er das einzige Element ist, das gescrollt wird:

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

Answer 2

Html

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

Javascript-Funktion

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