Question

我有三栏。我想同时向相反方向滚动所有三列。

我遵循小提琴链接。这项工作为两列我想为三列

制作相同的功能

＆＃13;

// Add event listener for scrolling
$("#left").on("scroll", function() {
  var scrolledleft = parseInt($("#left").scrollTop()) * -1;
  console.log(scrolledleft + scrolledright)
  $("#right").scrollTop(scrolledleft + scrolledright)
})

//Move right column to bottom initially
$("#right").scrollTop($("#right").height())
  //Get actual distance scrolled
var scrolledright = parseInt($("#right").scrollTop())

＆＃13;

#left {
  width: 50%;
  height: 500px;
  top: 0;
  left: 0;
  position: fixed;
  overflow: auto;
}
#right {
  width: 50%;
  height: 500px;
  bottom: 0;
  right: 0;
  position: fixed;
  overflow: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body>
  <div id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>

＆＃13;

Answer 1

我认为你应该使用百分比，因为这些块的大小不一样（通常）

这个怎么样，有帮助吗？ (JsFiddle)

// Add event listener for scrolling odds
$(".scrollSide:odd").on("scroll", function () {
    var trueDivHeight = $(this)[0].scrollHeight;
    var divHeight = $(this).height();
    var scrollHeight = trueDivHeight - divHeight;
    //console.log($(".scrollSide:odd"));
    var scrolledleft = 1+(parseInt($(this).scrollTop())/scrollHeight)*-1;
    //console.log(scrolledleft);
    $(".scrollSide:even").scrollTop(function(){
        var trueDivHeight2 = $(this)[0].scrollHeight;
        var divHeight2 = $(this).height();
        var scrollHeight2 = trueDivHeight2 - divHeight2;
        console.log(scrolledleft*scrollHeight2);
        return scrolledleft*scrollHeight2;
    });
});

// Add event listener for scrolling evens
$(".scrollSide:even").on("scroll", function () {
    var trueDivHeight = $(this)[0].scrollHeight;
    var divHeight = $(this).height();
    var scrollHeight = trueDivHeight - divHeight;

    var scrolledleft = 1+(parseInt($(this).scrollTop())/scrollHeight) * -1;
    //console.log(scrolledleft);
    $(".scrollSide:odd").scrollTop(function(){
        var trueDivHeight2 = $(this)[0].scrollHeight;
        var divHeight2 = $(this).height();
        var scrollHeight2 = trueDivHeight2 - divHeight2;
        return scrolledleft*scrollHeight2;
    });
});

//init even scrolls at the bottom
$(".scrollSide:even").scrollTop(function(){
        var trueDivHeight2 = $(this)[0].scrollHeight;
        var divHeight2 = $(this).height();
        var scrollHeight2 = trueDivHeight2 - divHeight2;
        return scrollHeight2;
    });

我更改了使用ID的部分以便使用类，并且它应用于奇数和偶数选择...您可以使用此代码拥有任意数量的内容，只需将奇数和偶数选项替换为你想要的课程

[更新]

它有效，但我认为存在性能问题，因为它们每个都会在链接事件触发时向后滚动（编程方式，它应该进入无限循环，但它不会！）

jquery滚动与三列小提琴链接

1 个答案: