我有三列。我想同时沿相反方向滚动所有三列。
我跟随小提琴链接。我想为三列做相同的功能
Fiddle
// 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())#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;
}<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>最佳答案
我认为您应该使用百分比，因为块的大小通常不一样
怎么样，有帮助吗？ (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以便使用类的部分，并且将其应用于奇数和偶数选择...此代码可以有任意数量，只需将奇数和偶数选择替换为所需的类
[更新]
它起作用，但是我认为存在性能问题，因为它们每个都在链事件触发时将另一个滚动回去（通过编程，它应该进入无限循环，但不会！）