jquery两列滚动效果

Question

你好，我正在使用fiddle链接向上移动一个div，同时向下移动第二个div。

对于左列，它可以正常工作，但我希望右列具有相同的功能

我正在使用此链接

[example][1]

Answer 1

只需对右列执行与对左列相同的操作：

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

http://jsfiddle.net/noh1jogv/

编辑：Firefox在程序化使用scrollTop时似乎会触发scroll事件。这意味着左div中的滚动触发右div中的scroll，反之亦然。为了避免这种情况，使用额外的可变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/