添加-webkit-overflow-scrolling后表格固定首列失效的解决方案咨询

你分析的完全正确——-webkit-overflow-scrolling: touch确实会给滚动容器创建新的堆叠上下文，这直接导致你用绝对定位实现的固定首列失效：原本相对于.fixed-table-container定位的首列单元格，现在会相对于开启了动量滚动的.fixed-table-body（新的堆叠上下文）定位，滚动时自然会跟着容器偏移，失去固定效果。

下面给你两个可行的解决方案，根据你的现有结构偏好选择：

方案一：拆分表格（推荐，结构更清晰，兼容性更好） #

把首列和其余内容拆分成两个独立的表格，分别放在固定容器和滚动容器中，再通过JS同步它们的滚动行为，这样既能保留动量滚动，也能稳定实现首列固定。

修改后的HTML： #

<div class="fixed-table-container">
  <!-- 固定首列的表格 -->
  <div class="fixed-column">
    <table id="fixed-table">
      <tbody>
        <!-- 这里放置原表格的首列内容，和主表格行一一对应 -->
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <!-- ...更多行 -->
      </tbody>
    </table>
  </div>
  <!-- 可滚动的内容表格 -->
  <div class="scrollable-body">
    <table id="content-table">
      <tbody>
        <!-- 这里放置原表格除首列外的其余内容 -->
        <tr><td>内容1-1</td><td>内容1-2</td><td>内容1-3</td></tr>
        <tr><td>内容2-1</td><td>内容2-2</td><td>内容2-3</td></tr>
        <!-- ...更多行 -->
      </tbody>
    </table>
  </div>
</div>

修改后的CSS： #

.fixed-table-container {
  display: flex;
  position: relative;
  height: 100%; /* 确保容器占满可用高度 */
}
.fixed-column {
  flex-shrink: 0; /* 固定宽度不被压缩 */
  background-color: #fff;
  border-right: 2px solid #222;
}
.scrollable-body {
  flex: 1; /* 占满剩余宽度 */
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch; /* 开启动量滚动 */
}
/* 统一两个表格的行高，避免错位 */
#fixed-table tbody tr, #content-table tbody tr {
  height: 44px;
  line-height: 46px;
}
#fixed-table tbody td {
  width: 26px; /* 匹配你原有的首列宽度 */
}

添加JS同步滚动： #

const scrollableBody = document.querySelector('.scrollable-body');
const fixedColumn = document.querySelector('.fixed-column');

// 同步纵向滚动，确保两个表格上下对齐
scrollableBody.addEventListener('scroll', () => {
  fixedColumn.scrollTop = scrollableBody.scrollTop;
});

// 如果固定列也需要纵向滚动，反过来同步（可选）
fixedColumn.addEventListener('scroll', () => {
  scrollableBody.scrollTop = fixedColumn.scrollTop;
});

方案二：调整滚动容器层级（最小改动原有结构） #

如果不想拆分表格，可以通过新增一个外层滚动容器，把-webkit-overflow-scrolling: touch移到外层，让原有的.fixed-table-container依然是首列的定位上下文。

修改后的HTML： #

<div class="fixed-table-container">
  <!-- 新增外层滚动容器 -->
  <div class="scroll-wrapper">
    <div class="fixed-table-body">
      <table id="table">
        <!-- 你的原表格内容 -->
      </table>
    </div>
  </div>
</div>

修改后的CSS： #

.fixed-table-container {
  position: relative;
  height: 100%;
}
/* 把滚动和动量滚动属性移到新增的外层容器 */
.scroll-wrapper {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
.fixed-table-body {
  height: 100%;
}
/* 保留你原有的首列定位样式 */
#table > tbody > tr > td:first-child {
  position: absolute;
  display: inline-block;
  background-color: #fff;
  border-right: 2px solid #222;
  z-index: 9;
  left: 0;
  height: 44px;
  width: 26px;
  line-height: 46px;
}
#table > tbody > tr > td:nth-child(2) {
  padding-left: 56px !important;
}

这个方案的核心是：让新的堆叠上下文由外层的.scroll-wrapper创建，而首列单元格的定位父级还是.fixed-table-container（因为它是position: relative），这样首列就能保持固定，同时滚动容器依然拥有动量滚动效果。

注意事项 #

• 测试时确保移动端浏览器（尤其是iOS Safari）中滚动容器有明确的高度，避免因为高度计算问题导致滚动异常。
• 如果表格行高动态变化，方案一中的JS可以监听行高变化，实时同步，避免错位。

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