DataTables中能否实现两个表格的滚动联动？如何实现？

DataTables 目前没有原生内置的双表格同步滚动功能，不过可以通过监听表格滚动容器的scroll事件手动实现同步，实现逻辑非常简单。

首先需要给两个表格都开启固定滚动配置，确保两个表格拥有独立的滚动容器，完整示例代码如下：

<!-- 两个表格的外层容器，使用flex布局实现左右排列 -->
<div style="display: flex; gap: 20px; width: 100%;">
  <div style="flex: 1;">
    <table id="tableLeft" class="display" style="width:100%"></table>
  </div>
  <div style="flex: 1;">
    <table id="tableRight" class="display" style="width:100%"></table>
  </div>
</div>

// 初始化左侧表格
const tableLeft = new DataTable('#tableLeft', {
  data: leftData, // 替换为实际的左侧表格数据源
  columns: leftColumns, // 替换为实际的左侧表格列配置
  scrollY: 400, // 固定垂直滚动高度，需和右侧表格配置一致
  scrollX: true, // 开启水平滚动，不需要水平同步可以关闭
  paging: false,
  searching: false,
  info: false
});

// 初始化右侧表格
const tableRight = new DataTable('#tableRight', {
  data: rightData, // 替换为实际的右侧表格数据源
  columns: rightColumns, // 替换为实际的右侧表格列配置
  scrollY: 400, // 需和左侧表格的滚动高度保持一致
  scrollX: true,
  paging: false,
  searching: false,
  info: false
});

// 获取两个表格的滚动容器
const scrollLeft = tableLeft.container().querySelector('.dataTables_scrollBody');
const scrollRight = tableRight.container().querySelector('.dataTables_scrollBody');

let isSyncing = false; // 加锁避免滚动事件互相触发死循环

// 左侧滚动时同步到右侧
scrollLeft.addEventListener('scroll', () => {
  if (isSyncing) return;
  isSyncing = true;
  scrollRight.scrollTop = scrollLeft.scrollTop;
  // 不需要水平同步可以删掉下面这行
  scrollRight.scrollLeft = scrollLeft.scrollLeft;
  isSyncing = false;
});

// 右侧滚动时同步到左侧，不需要双向同步可以删掉这段
scrollRight.addEventListener('scroll', () => {
  if (isSyncing) return;
  isSyncing = true;
  scrollLeft.scrollTop = scrollRight.scrollTop;
  scrollLeft.scrollLeft = scrollRight.scrollLeft;
  isSyncing = false;
});

• 两个表格的scrollY配置必须保持一致，若两个表格的总行数不一致，滚动到尾部时会出现同步偏差，建议两个表格行数一致时使用该方案
• 如果只需要垂直方向同步，删除代码中scrollLeft相关的赋值逻辑即可
• isSyncing锁为必填项，用来避免两个滚动事件互相触发导致的滚动卡顿问题

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