Question

So basically, I’m creating a site that thats split into two columns. These columns are go the entre height of the browser and individually fill up 50% of the screen. Basic example:

 -------------
|      |      |
|  up  | down |
|      |      |
 -------------

I’ve designed this. Each column is a div and both scroll vertically. What I want is to be able to scroll either div and the scroll direction on the right goes the opposite way to the one on the left; but they scroll at the same time.

I’d also like a single scrollbar on the right (like a normal vertical site) but when you scroll that, one side goes up and the other side goes down.

Is anyone able to assist here? Or point me into a particular direction?

Example:
http://buero-buero.org/

Answer 1

Shamelessly stolen by the page you link, it’s quite trivial:

<script>
function crisscross() {
$('down-left').style.bottom = '-' + window.scrollY + 'px';
$('down-right').style.bottom = '-' + window.scrollY + 'px';
$('left').style.left = '-' + window.scrollY + 'px';
$('right').style.right = '-' + window.scrollY + 'px';
}
</script> 

Edit:

Answering your comment:

A) window.scrollY is the amount of vertical scroll of the page, you just absolute position your #down div with a reverse absolute position. If you don’t understand it you should at least mess with it for a while to understand it or, better, learn how window.scrollY and jquery $().style work.

B) It’s not the amount of code you can put credits on… it’s not stealing but simply not reinventing the wheel.

C) Don’t get the point, sorry, #down-right is what you are asking in your question: a div scrolling in the opposite direction of the scrollbar.

Edit again:

Don’t forget to give a look at css too:

div#down-right {
    bottom: 0;
    position: fixed;
    right: 6%;
}