如何为div同步两个滚动条

Question

我有这个代码用于文件比较：http://jsfiddle.net/CrN6X/

现在它可以满足我的需求：

1. 只能垂直滚动的一个大div
2. 两个只能水平滚动的小型潜水

这样我可以很容易地比较我的文件，但是我有一个问题：只有当我一直向下滚动时，底部滚动条才可访问。

如何让它们浮动或将滚动条移动到另一个div，这总是可以看到，所以我不需要向下滚动另一个div一直到底部访问他们？

Answer 1

这里的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>

Answer 2

为了避免在使用鼠标滚轮滚动时滚动滞后效应，我们需要禁用第二个滚动事件触发器。检查下面的方法：

  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>

Answer 3

不，滚动条放在较小的div中。这些滚动条被锁定在div的底部，因此不起作用。

你可以做的是在你的大div下创建两个javascript滚动条 并完全禁用默认滚动条。然后，您的滚动条始终可见。如果你想加倍，这也允许你连接滚动条，使左右窗口滚动到相同的位置，以便更好地进行比较。