Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make two divs share the same scrollbar?

Tags:

html

css

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>
like image 695
MikeN Avatar asked Sep 10 '11 18:09

MikeN


2 Answers

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;
}
like image 199
Michał Wojciechowski Avatar answered Oct 14 '22 23:10

Michał Wojciechowski


Html

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

javascript function

function OnScroll(div) {
var div1 = document.getElementById("col1");
div1.scrollTop = div.scrollTop;}
like image 31
ShadowUC Avatar answered Oct 14 '22 21:10

ShadowUC