如何实现两个并排HTML表格的同步滚动控制

不用把两个表格塞进同一个div里，我们可以通过监听滚动事件并同步滚动位置来实现，这样完全不会破坏你原本的布局和尺寸设置。具体做法如下：

步骤1：添加JavaScript同步逻辑 #

我们需要监听两个滚动容器的scroll事件，当其中一个滚动时，把它的scrollTop值同步给另一个容器。为了避免事件循环触发（比如A滚动触发B滚动，B滚动又触发A滚动），可以加个简单的标记来跳过重复处理。

把这段代码放在你的HTML底部（或者DOM加载完成后执行）：

// 获取两个滚动容器元素
const employeeScroll = document.getElementById('table-scroll-employees');
const taskScroll = document.getElementById('table-scroll-tasks');

// 标记是否正在同步，避免循环触发
let isSyncing = false;

// 监听员工列滚动，同步任务表
employeeScroll.addEventListener('scroll', () => {
  if (!isSyncing) {
    isSyncing = true;
    taskScroll.scrollTop = employeeScroll.scrollTop;
    setTimeout(() => isSyncing = false, 10);
  }
});

// 监听任务表滚动，同步员工列
taskScroll.addEventListener('scroll', () => {
  if (!isSyncing) {
    isSyncing = true;
    employeeScroll.scrollTop = taskScroll.scrollTop;
    setTimeout(() => isSyncing = false, 10);
  }
});

步骤2：修正CSS确保滚动范围一致 #

你的CSS里有个拼写错误：#table-scroll-tasks的max-heigh应该是max-height，而且要和员工列的max-height保持一致（都是500px），这样两个容器的滚动范围匹配，同步滚动才会准确。调整后的CSS片段：

#table-scroll-tasks {
  overflow-x: scroll;
  overflow-y: scroll;
  max-height: 500px; /* 修正拼写并和员工列高度统一 */
}

另外，保留你原本.tableTasks的height:1000px设置，这样容器会出现滚动条，和员工列的滚动范围对应。

为什么这个方法更优？ #

• 完全保留你原本的布局结构，不需要调整div包裹方式，不会破坏尺寸设置
• 滚动同步实时流畅，用户体验自然
• 代码逻辑简单，后续维护或扩展都很方便

测试一下，现在滚动员工列或者任务表，另一个都会跟着同步上下滚动，横向滚动不受影响，完美适配你的需求！

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