这个问题我之前也遇到过，大概率是因为滚动容器的层级和宽度计算没处理好，导致垂直滚动条被横向滚动的区域给挡住了。我给你调整一下代码结构，应该就能解决：

修改后的HTML结构 #

<div class="table-container">
  <!-- 固定表头区域 -->
  <div class="table-header">
    <div class="table-row">
      <div class="table-cell">表头列1</div>
      <div class="table-cell">表头列2</div>
      <div class="table-cell">表头列3</div>
      <div class="table-cell">表头列4</div>
      <div class="table-cell">表头列5</div>
    </div>
  </div>
  <!-- 可滚动内容区域 -->
  <div class="table-content">
    <div class="table-body">
      <!-- 数据行 -->
      <div class="table-row">
        <div class="table-cell">数据行1-1</div>
        <div class="table-cell">数据行1-2</div>
        <div class="table-cell">数据行1-3</div>
        <div class="table-cell">数据行1-4</div>
        <div class="table-cell">数据行1-5</div>
      </div>
      <div class="table-row">
        <div class="table-cell">数据行2-1</div>
        <div class="table-cell">数据行2-2</div>
        <div class="table-cell">数据行2-3</div>
        <div class="table-cell">数据行2-4</div>
        <div class="table-cell">数据行2-5</div>
      </div>
      <!-- 可以添加更多数据行测试滚动 -->
    </div>
  </div>
</div>

对应的CSS样式 #

/* 外层容器 */
.table-container {
  width: 450px; /* 自定义容器宽度 */
  height: 350px; /* 自定义容器高度 */
  border: 1px solid #ddd;
  position: relative;
}

/* 固定表头 */
.table-header {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 10;
  border-bottom: 2px solid #ccc;
}

/* 内容滚动区域 */
.table-content {
  height: calc(100% - 42px); /* 减去表头的高度（包含内边距和边框） */
  overflow: auto; /* 同时启用水平、垂直滚动 */
}

/* 行样式 */
.table-row {
  display: flex;
  min-width: max-content; /* 确保内容总宽度超过容器时触发横向滚动 */
}

/* 单元格样式 */
.table-cell {
  width: 160px; /* 固定单元格宽度，表头和内容保持一致 */
  padding: 10px;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}

.table-row:last-child .table-cell {
  border-bottom: 1px solid #eee;
}

关键修复点说明 #

1. 拆分滚动层级：把表头和内容区域分开，表头用position: sticky固定在顶部，不需要单独给表头加横向滚动容器，避免滚动条互相遮挡。
2. 统一滚动触发：内容区域直接设置overflow: auto，只要内容超出容器范围，水平和垂直滚动条都会自动显示，而且垂直滚动条始终固定在容器右侧，不会被横向滚动的内容带跑。
3. 宽度自适应处理：给.table-row设置min-width: max-content，确保当所有单元格总宽度超过容器宽度时，自动触发横向滚动，同时不会影响垂直滚动条的显示。

另外要注意：如果你的表头和内容单元格宽度不一致，会出现错位问题，所以一定要保证两者的width属性完全相同哦。

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