如何实现类似getrepeat.io的页面区块联动滚动效果？

核心逻辑 #

要实现两个区块互相联动滚动，关键是监听各自的滚动事件，同步滚动位置，但要加标记避免事件循环触发。比如A滚动时同步B的位置，B滚动时同步A的位置，通过一个状态变量阻止重复触发的嵌套事件。

具体实现步骤 #

1. 基础HTML结构 #

假设两个滚动区块的结构如下：

<div class="scroll-block" id="blockA">
  <div class="block-content">
    <!-- 区块A的内容 -->
  </div>
</div>

<div class="scroll-block" id="blockB">
  <div class="block-content">
    <!-- 区块B的内容 -->
  </div>
</div>

2. CSS样式 #

给区块设置固定尺寸并开启滚动：

.scroll-block {
  width: 400px;
  height: 300px;
  overflow: auto;
  border: 1px solid #eee;
  margin: 1rem;
}

.block-content {
  height: 1200px; /* 足够长的内容触发滚动 */
}

3. JavaScript核心代码 #

用标记变量控制同步状态，避免循环触发：

const blockA = document.getElementById('blockA');
const blockB = document.getElementById('blockB');
let isSyncing = false;

// 监听A的滚动，同步到B
blockA.addEventListener('scroll', () => {
  if (!isSyncing) {
    isSyncing = true;
    // 同步纵向和横向滚动位置
    blockB.scrollTop = blockA.scrollTop;
    blockB.scrollLeft = blockA.scrollLeft;
    // 延迟重置标记，防止嵌套事件循环
    setTimeout(() => isSyncing = false, 10);
  }
});

// 监听B的滚动，同步到A
blockB.addEventListener('scroll', () => {
  if (!isSyncing) {
    isSyncing = true;
    blockA.scrollTop = blockB.scrollTop;
    blockA.scrollLeft = blockB.scrollLeft;
    setTimeout(() => isSyncing = false, 10);
  }
});

4. 适配内容比例不同的场景 #

如果两个区块的内容高度/宽度不一致，可以按滚动比例同步，保证滚动进度一致：

// 按比例同步纵向滚动
const scrollRatioA = blockA.scrollTop / (blockA.scrollHeight - blockA.clientHeight);
blockB.scrollTop = scrollRatioA * (blockB.scrollHeight - blockB.clientHeight);

注意事项 #

• 确保两个区块的滚动方向一致（同为纵向或横向），混合方向需单独处理对应属性。
• 延迟重置标记的时间可根据实际场景微调，平衡同步及时性和循环避免效果。
• 若使用React、Vue等框架，可将逻辑放到组件生命周期中，用状态变量替代全局标记。

内容的提问来源于stack exchange，提问作者Keris