Make two divs share the same scrollbar?

9
votes

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>
2
htmlcss

2 Answers

6
votes

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;
}
3
votes

Html

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

javascript function

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