html - jquery scrolling effect in two column

Question

Hello I m using fiddle link to move one div upward direction and second div in downward direction at the same time .

For left column its working fine but I want same functionality for right column

I am using this link

[example][1]

Answer 1

Just do the same with the right col what you did with the left:

$("#right").on("scroll", function () {
    var scrolledleft = parseInt($("#right").scrollTop()) * -1;
    console.log(scrolledleft + scrolledright)
    $("#left").scrollTop(scrolledleft + scrolledright)
});

http://jsfiddle.net/noh1jogv/

Edit: Firefox seems to trigger scroll event when using scrollTop programatically. That means that a scroll in the left div triggers scroll in the right div and vice versa. To avoid this use an additional varialbe preventEvent:

var preventEvent = false;
// Add event listener for scrolling
$("#left").on("scroll", function (e) {
    if(preventEvent) {
        preventEvent = false;
        return;
    }
    preventEvent = true;
    var scrolledleft = parseInt($("#left").scrollTop()) * -1;
    $("#right").scrollTop(scrolledleft + scrolledright);
});

// Add event listener for scrolling
$("#right").on("scroll", function (e) {
    if(preventEvent) {
        preventEvent = false;
        return;
    }
    preventEvent = true;
    var scrolledleft = parseInt($("#right").scrollTop()) * -1;
    $("#left").scrollTop(scrolledleft + scrolledright)
});

http://jsfiddle.net/noh1jogv/2/