在2个div上同步滚动

在两个div元素上同步滚动可以通过多种方式实现，主要涉及JavaScript来监听和同步两个元素的滚动事件。以下是基础概念、实现方法以及一些优化建议。

基础概念

滚动事件：当用户滚动页面或某个元素时触发的事件。
事件监听：使用JavaScript来监听特定事件并在事件发生时执行相应的函数。

实现方法

以下是一个简单的示例，展示如何同步两个div的滚动：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sync Scroll</title>
<style>
  .scrollable {
    width: 200px;
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    margin: 10px;
  }
</style>
</head>
<body>

<div id="div1" class="scrollable">
  <!-- 内容 -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <!-- 更多内容 -->
</div>

<div id="div2" class="scrollable">
  <!-- 同样的内容 -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <!-- 更多内容 -->
</div>

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

  // 监听第一个div的滚动事件
  div1.addEventListener('scroll', function() {
    // 设置第二个div的滚动位置与第一个相同
    div2.scrollTop = this.scrollTop;
  });

  // 监听第二个div的滚动事件
  div2.addEventListener('scroll', function() {
    // 设置第一个div的滚动位置与第二个相同
    div1.scrollTop = this.scrollTop;
  });
</script>

</body>
</html>