scroll other scrollbars with scrollbar

Question

i have 3 divs with scrollbars. If i scroll in div 1 i want to scroll div 2 and 3 in the opposite direction. The distance scrolled should be half the distance of div 1.

This is what i have now (small part, rest is in jsfiddle), which works for 1 div.

$("#textBox1").scroll(function () {
        console.log("scroll 1");
        var offset = $("#textBox1").scrollTop() - scrollPosTBox1;
        var half_offset = offset/2.0;

        disable1 = true;

        if(disable2 == false) {
            $("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
        }
        if(disable3 == false) {
            $("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
        }    
        disable1 = false;


    });

However, if i try to get the same for the other 2 divs then i can't scroll anything anymore. This is because div 1 triggers div 2 and div 2 triggers back to div 1 for example. I tried to fix this with the disable code but it doesn't help.

Can someone help me?

http://jsfiddle.net/XmYh5/1/

Answer 1

No disrespect to @EmreErkan and @Simon for their effort. Here's a no-click version of this.

var $boxes = $("#textBox1,#textBox2,#textBox3"),
    active;

$boxes.scrollTop(150);

// set initial scrollTop values
updateScrollPos();

// bind mouseenter: 
// 1) find which panel is active 
// 2) update scrollTop values

$boxes.mouseenter(function () {
    active = this.id;
    updateScrollPos();
});

// bind scroll for all boxes
$boxes.scroll(function (e) {

    $this = $(this);

    // check to see if we are dealing with the active box
    // if true then set scrolltop of other boxes relative to the active box
    if(this.id == active){

        var $others = $boxes.not($this),
            offset = $this.scrollTop()-$this.data("scroll"),
            half_offset = offset / 2;

        $others.each(function(){
            $this = $(this);
            $this.scrollTop($this.data("scroll") - half_offset);
        });
    }

});

// utility function: 
// assign scrollTop values element's data attributes (data-scroll)

function updateScrollPos() {
    $boxes.each(function(){
        $this = $(this);
        $this.data("scroll",$this.scrollTop());
    });
}

Fiddle