如何实现同一HTML表格内多个滚动区域的同步滚动效果？

完全不需要修改现有表格结构，仅调整JS逻辑即可实现多滚动区域的同步横向滚动，你现有代码的问题是错用了控制垂直滚动的scrollTop方法，替换为控制横向滚动的scrollLeft即可。

修正后的jQuery代码 #

$(function(){
    // 预存滚动元素集合，避免重复查询DOM提升性能
    const $linkedScroll = $('.linked');
    let isSyncing = false;

    $linkedScroll.scroll(function(){
        // 加锁避免滚动事件循环触发导致的滚动卡顿
        if (isSyncing) return;
        isSyncing = true;

        const currentScrollLeft = $(this).scrollLeft();
        $linkedScroll.scrollLeft(currentScrollLeft);

        // 异步解锁，确保本次滚动同步完成后再响应下一次滚动事件
        setTimeout(() => isSyncing = false, 0);
    })
})

逻辑说明 #

• 现有HTML、CSS结构不需要做任何调整，linked类已经完成了同步滚动容器的标记
• 加锁逻辑可以有效避免给多个容器设置滚动值时重复触发滚动事件，导致的性能损耗或者滚动抖动问题
• 后续如果需要新增同步滚动的区域，仅需要给对应滚动容器加上linked类即可自动适配，不需要修改JS逻辑
• 如果你的场景同时需要垂直滚动同步，只需要在代码中补充scrollTop的同步逻辑即可

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