javascript - 如何同步 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 滚动条并完全禁用默认滚动条。然后你的滚动条总是可见的。如果您想加倍努力，这还允许您耦合滚动条，以便左右窗口滚动到相同的位置，以便更好地进行比较。