如何为两个div同步滚动条

Question

我有一个文件比较的代码：

http://jsfiddle.net/CrN6X/

现在它能做到我需要的：

1. 一个可以垂直滚动的大div
2. 两个可以水平滚动的小div

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

我该怎么做才能使它们漂浮或将滚动条移动到另一个div中，以便始终可见，这样我就不需要滚动另一个div到底部才能访问它们了？

- Peon

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>

- Ryan McDonough

---

嗯...就我所看到的，那个脚本只能让我同时滚动两个div（这很好），但是我该如何在大div下面获取滚动条呢？ - Peon

如果有横向滚动条的内容，则会出现横向滚动。JS Fiddle中没有JS，所以它不起作用。将该代码放入电脑上的HTML文档中，并保留其中的JS并编辑CSS，它就会为您工作。 - Ryan McDonough

好的，我已将它在这里实现：http://jsfiddle.net/CrN6X/3/ 但仍然在努力让它在我的代码中运行 :) - Peon

这似乎是你在这个项目中需要的，两个下方的条都显示出来了，滚动也匹配了吗？如果你想要隐藏左侧div上的垂直滚动条，你应该遵循以下步骤：https://dev59.com/MnM_5IYBdhLWcg3wjj-r - Ryan McDonough

Nea，实际上这更好，特别是当文本不同时。非常感谢你，伙计。 - Peon

这里有一个 jsfiddle，虽然稍作修改：https://jsfiddle.net/zoldello/okeeaf41/ - Phil

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>

- Nilton Vasques

Answer 3

不，滚动条位于您较小的div内部。这些滚动条锁定在您的div底部，因此无法起作用。

您可以做的是，在大div下面制作两个javascript滚动条，并完全禁用默认滚动条。然后您的滚动条始终可见。如果您想走得更远，这还允许您将滚动条耦合，以便左右窗口都滚动到相同位置，从而实现更好的比较。

- Nebula

---

这正是我正在寻找的。你能提供一个教程链接或者其他展示如何实现它的东西吗？我的意思是在底部有一个大滚动条，可以同时滚动两个div，那就太完美了。 - Peon

@DainisAbols 看起来有人比我先了；-) 请查看Ryan的答案以获取实现方法。但如果您觉得我的回答有用，请随意点赞；-) - Nebula

@DainisAbols 那另一半会是什么呢？ - Nebula

现在一切都正常了，两个滚动条都同步了。非常感谢你，伙计。 - Peon