跨列表头Scroll-snap异常：无法吸附至红色列末尾求助

你的问题核心是滚动吸附的参考点不对——默认的scroll-snap-align: start是让黄色表头的左边缘对齐滚动容器的左边缘，但红色粘性列始终占据容器左侧区域，所以需要调整吸附的偏移量，让黄色表头对齐到红色列的右侧。

修改后的完整代码 #

CSS

div {
  overflow-x: auto; /* 只开启横向滚动 */
  scroll-snap-type: x mandatory; /* 仅横向强制吸附 */
  width: 200px;
}

table {
  table-layout: fixed; /* 固定表格布局，确保列宽可控 */
  width: 100%;
}

table thead .group {
  background: yellow;
  padding-right: 12px;
  background-clip: padding-box;
  scroll-snap-align: start;
  scroll-snap-margin-left: 80px; /* 偏移量等于红色粘性列的宽度 */
}

table thead th {
  text-align: left;
}

table tbody th {
  position: sticky;
  left: 0;
  white-space: nowrap;
  background: red;
  width: 80px; /* 固定红色列宽度，对应上面的偏移量 */
}

table tbody td,
table tbody th {
  padding-right: 12px;
}

HTML

<div>
  <table>
    <thead>
      <tr>
        <th/>
        <th colspan="4" class="group">
          Group 1
        </th>

        <th colspan="4" class="group">
          Group 2
        </th>

        <th colspan="4" class="group">
          Group 3
        </th>

        <th colspan="4" class="group">
          Group 4
        </th>

      </tr>
      <tr>
        <th/>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>

        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>

        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>

        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>

      </tr>
    </thead>

    <tbody>
      <tr>
        <th>Sticky</th>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>

        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>

        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>

        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
      </tr>
    </tbody>
  </table>
</div>

关键修改点说明 #

1. 固定表格布局：添加table-layout: fixed确保红色列宽度固定，避免浏览器自动调整列宽导致偏移量失效。
2. 设置红色列固定宽度：给tbody th指定width，让偏移量有明确的参考值。
3. 调整吸附偏移：通过scroll-snap-margin-left让黄色表头的吸附点左移红色列的宽度，实现对齐到红色列末尾的效果。
4. 优化滚动容器配置：将scroll-snap-type改为x mandatory，只针对横向滚动生效，避免不必要的纵向干扰。

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