同时滚动两个 div

在 Web 开发中，有时候需要在同一时刻让多个 DIV 滚动，这时我们需要一种方式可以同时控制它们的滚动，让它们看起来是同步的。

解决方案

我们可以使用 JavaScript 来实现这个功能。以下是一个简单的示例，演示了如何控制两个 div 的滚动：

<div id="scrollDiv1" style="overflow-y: scroll; height: 200px;">
  <p>Scrolling div 1</p>
  <p>Scrolling div 1</p>
  <p>Scrolling div 1</p>
  <p>Scrolling div 1</p>
  <p>Scrolling div 1</p>
  <p>Scrolling div 1</p>
  <p>Scrolling div 1</p>
  <p>Scrolling div 1</p>
  <p>Scrolling div 1</p>
</div>

<div id="scrollDiv2" style="overflow-y: scroll; height: 200px;">
  <p>Scrolling div 2</p>
  <p>Scrolling div 2</p>
  <p>Scrolling div 2</p>
  <p>Scrolling div 2</p>
  <p>Scrolling div 2</p>
  <p>Scrolling div 2</p>
  <p>Scrolling div 2</p>
  <p>Scrolling div 2</p>
  <p>Scrolling div 2</p>
</div>

<script>
  // 获取两个 div 元素
  var div1 = document.getElementById('scrollDiv1');
  var div2 = document.getElementById('scrollDiv2');

  // 给第一个 div 添加滚动事件
  div1.addEventListener('scroll', function() {
    // 同步更新第二个 div 的滚动位置
    div2.scrollTop = div1.scrollTop;
  });

  // 给第二个 div 添加滚动事件
  div2.addEventListener('scroll', function() {
    // 同步更新第一个 div 的滚动位置
    div1.scrollTop = div2.scrollTop;
  });
</script>

以上示例包含两个 div 元素（id 分别为“scrollDiv1”和“scrollDiv2”），它们都有固定的高度和垂直滚动条。通过 JavaScript，我们添加了滚动事件侦听器，以便在任一 div 滚动时更新另一个 div 的滚动位置。

这段代码可以在任何支持 JavaScript 的浏览器上运行。

总结

通过使用 JavaScript，我们可以简单地实现两个 div 同步滚动的效果。这是一个非常实用的技巧，特别是在需要展示大量数据时。