如何为包含表格的div添加上下双横向滚动条？

以下是无需依赖第三方库的纯前端实现方案，核心思路是通过克隆滚动区域的滚动条并同步滚动状态：

1. 调整HTML结构 #

在原有的.table-wrapper内部，新增一个顶部滚动条容器，同时把表格放到统一的滚动内容容器里：

<div class="table-wrapper">
  <!-- 顶部滚动条容器 -->
  <div class="scrollbar-top">
    <div class="scrollbar-placeholder"></div>
  </div>
  <!-- 原有表格的滚动容器 -->
  <div class="scroll-content">
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
</div>

2. 编写CSS样式 #

通过定位和溢出控制，让顶部滚动条悬浮在容器顶部，同时保证两个滚动条的长度匹配：

.table-wrapper {
  position: relative;
  overflow-x: hidden; /* 隐藏容器自身溢出，避免多余滚动条 */
}

.scroll-content {
  overflow-x: auto;
  padding-top: 1px; /* 给底部滚动条留间距，避免和顶部滚动条重叠 */
}

.scrollbar-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden; /* 隐藏顶部滚动条的纵向溢出，防止影响布局 */
}

.scrollbar-placeholder {
  height: 1px; /* 高度设为1px，不占用可见空间 */
  /* 宽度将通过JS设置为表格宽度，保证滚动条长度匹配 */
}

3. 同步滚动状态的JavaScript #

通过监听两个滚动容器的scroll事件，双向同步滚动位置：

const scrollContent = document.querySelector('.scroll-content');
const scrollbarTop = document.querySelector('.scrollbar-top');
const placeholder = document.querySelector('.scrollbar-placeholder');

// 更新占位元素宽度，使其与表格完全一致
function updatePlaceholderWidth() {
  placeholder.style.width = `${scrollContent.querySelector('table').offsetWidth}px`;
}

// 同步滚动：底部滚动时带动顶部
scrollContent.addEventListener('scroll', () => {
  scrollbarTop.scrollLeft = scrollContent.scrollLeft;
});

// 同步滚动：顶部滚动时带动底部
scrollbarTop.addEventListener('scroll', () => {
  scrollContent.scrollLeft = scrollbarTop.scrollLeft;
});

// 页面加载和窗口 resize 时更新宽度
window.addEventListener('load', updatePlaceholderWidth);
window.addEventListener('resize', updatePlaceholderWidth);

注意事项 #

• 如果表格内容是动态加载的，需要在内容渲染完成后调用updatePlaceholderWidth()更新占位元素宽度
• 若使用Vue/React等框架，可将滚动同步逻辑放到组件的生命周期钩子（如mounted/useEffect）中执行

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