javascript 用jquery同时滚动2个滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5389228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll 2 scrollbars with jquery the same time
提问by Benjamin
Is it possible to scroll 2 scrollbars with one scrollbar?
是否可以用一个滚动条滚动 2 个滚动条？
回答by beeglebug
All you need to do it tie the scrollTopproperty of one element to the scrollTopof the other, using a function tied to the scrollevent.
您只需使用与事件相关的函数，scrollTop即可将一个元素的属性与另一个元素的属性scrollTop联系起来scroll。
Something along the lines of:
类似的东西：
$('.linked').scroll(function(){
$('.linked').scrollTop($(this).scrollTop());
})
With that function, all elements with a class of linkedwill scroll whenever you use the scrollbars of one of them. (I assumed vertical scrolling, if you wanted horizontal, do the same but with scrollLeft)
使用该功能，linked每当您使用其中一个的滚动条时，所有具有 类的元素都会滚动。（我假设垂直滚动，如果你想要水平滚动，做同样的但使用scrollLeft）
See http://jsfiddle.net/g8Krz/510/for a working example of the above.
有关上述工作示例，请参阅http://jsfiddle.net/g8Krz/510/。
回答by Gerrit B
(to append beeglebug):
（附加 beeglebug）：
For horizontal 'linked' scrolling use:
对于水平“链接”滚动使用：
$('.linked').scroll(function(){
$('.linked').scrollLeft($(this).scrollLeft());
});
回答by Lox
I want to add a little improvement to the solution of beeglebug (which is already working nearly perfect).
我想对 beeglebug 的解决方案（已经近乎完美）添加一点改进。
If you discover VERY SLOW SCROLLINGby using the MOUSEWHEELon some browsers (e.g. OPERA), try to use unique IDs for the DIVs instead of the class:
如果您在某些浏览器（例如 OPERA）上使用鼠标滚轮发现非常慢的滚动，请尝试使用 DIV 的唯一 ID 而不是类：
$('#master').scroll(function(){
$('#slave').scrollTop($(this).scrollTop());
});
I had this problem and tried many solution but this one finally was the easiest. Taking a wild guess, i would claim that OPERA gets some performance problems while identifying the DIVs by class all the time when scrolling. (just noticed massive raise in CPU usage while using class as identifier)
我遇到了这个问题并尝试了很多解决方案，但最后这个是最简单的。大胆猜测一下，我会声称 OPERA 在滚动时始终按类识别 DIV 时会遇到一些性能问题。（刚刚注意到在使用类作为标识符时 CPU 使用率大幅上升）
回答by Pilou
If you are experiencing slow scrollingwhen you are using your mousewheel on linking scrollbars with beeglebug solution, here is a trick to fix it.
如果您在使用鼠标滚轮将滚动条与 beeglebug 解决方案链接时遇到滚动缓慢的问题，这里有一个解决它的技巧。
The cool thing is that it is kinda compactand it doesn't use any id, only classes, so much more sustainable.
很酷的一点是它有点紧凑，它不使用任何 id，只使用 classes，因此更加可持续。
// First add the class "linked-scrollbar" to the elements you want to link
// Then manually or dynamically add an attribute which will contain
// the data if the element is currently scrolling or not
$('.linked-scrollbar').attr("data-scrolling", "false");
$('.linked-scrollbar').scroll(function(){
if($(this).attr("data-scrolling") == "false"){
$('.linked-scrollbar').not(this).attr("data-scrolling", "true");
$('.linked-scrollbar').not(this).scrollLeft($(this).scrollLeft());
}
$(this).attr("data-scrolling", "false");
});
Here is a jsfiddleshowing that bug and the fix.
这是一个显示该错误和修复的jsfiddle。
