javascript 如何同步div的两个滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12039038/
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
How to synchronize two scrollbars for divs
提问by Peon
I have this code for file compares: http://jsfiddle.net/CrN6X/
我有这个文件比较代码：http: //jsfiddle.net/CrN6X/
Now it does what I need:
现在它做了我需要的：
- One big div that scrolls only vertically
- Two smaller dives that scroll only horizontally
- 一个只垂直滚动的大 div
- 两次仅水平滚动的较小潜水
This way I can compare my files pretty easy, but I have one problem: the bottom scrollbars are accessable only when I scroll all the way down.
这样我可以很容易地比较我的文件，但我有一个问题：只有当我一直向下滚动时才能访问底部滚动条。
How can I make them floator move the scrollbar to another div, that can bee seen always, so that I don't need to scroll down the other div all the way to the bottom to access them?
我怎样才能让它们浮动或将滚动条移动到另一个 div，总是可以看到的，这样我就不需要一直向下滚动另一个 div 到底部来访问它们？
回答by Ryan McDonough
The javascript in this is what you need really, but I added the html so you can see it in action.
此处的 javascript 正是您真正需要的，但我添加了 html，以便您可以看到它的实际效果。
$("#div1").scroll(function () {
$("#div2").scrollTop($("#div1").scrollTop());
$("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () {
$("#div1").scrollTop($("#div2").scrollTop());
$("#div1").scrollLeft($("#div2").scrollLeft());
});<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="div1" style="float:left;overflow:auto;height:100px;width:200px;">
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
</div>
<div id="div2" style="float:right;overflow:auto;height:100px;width:200px;">
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
</div>回答by Nilton Vasques
To avoid scrolling lags effect when using the mousewheel to scroll, we need to disable the second scroll event trigger. Check my approach below:
为了避免使用鼠标滚轮滚动时的滚动滞后效应，我们需要禁用第二个滚动事件触发器。在下面检查我的方法：
var ignoreScrollEvents = false
function syncScroll(element1, element2) {
element1.scroll(function (e) {
var ignore = ignoreScrollEvents
ignoreScrollEvents = false
if (ignore) return
ignoreScrollEvents = true
element2.scrollTop(element1.scrollTop())
})
}
syncScroll($("#div1"), $("#div2"))
syncScroll($("#div2"), $("#div1"))<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="div1" style="float:left;overflow:auto;height:100px;width:200px;">
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
</div>
<div id="div2" style="float:right;overflow:auto;height:100px;width:200px;">
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
</div>回答by Nebula
No, the scrollbar is placed inside your smaller div's. These scrollbars are locked to the bottom of your div so that won't work.
不，滚动条位于较小的 div 内。这些滚动条被锁定在 div 的底部，因此不起作用。
What you can do is make two javascript scrollbars underyour big div and disable the default scrollbar altogether. Then you have your scrollbars visible always. If you want to go for the extra mile this also allows you to couple the scrollbars so that both the left and the right window scroll to the same position allowing for a better comparison.
您可以做的是在大 div下制作两个 javascript 滚动条并完全禁用默认滚动条。然后你的滚动条总是可见的。如果您想加倍努力，这还允许您耦合滚动条，以便左右窗口滚动到相同位置，以便进行更好的比较。
