如何在滚动时固定表头？解决父容器带横向滚动的表头晃动问题

API 探路者

2026-6-17

实现带横向滚动表格的表头固定（无晃动）

需求说明

垂直滚动时表头固定在页面顶部，原方案用CSS sticky 因父容器横向滚动出现轻微上下晃动，需要替代方案。

可行方案实现思路

放弃sticky定位，改用position: fixed实现垂直固定，同时监听表格的横向滚动事件，同步表头的横向偏移，确保表头和表格内容始终对齐，彻底解决晃动问题。

具体实现步骤

当表格顶部超出视口时，将表头切换为fixed定位，设置对应的top、left、width属性，保证和表格初始位置对齐；
监听表格的横向滚动，同步表头的scrollLeft值，让表头随表格横向滚动；
当表格完全滚出视口（底部也超出）时，恢复表头的原始定位状态。

修改后的完整代码

HTML（修正原标签闭合错误）

<div class="mobile-container">
  <h1>移动版本</h1>

  <div class="table">
    <header>
      <div>名称</div>
      <div>描述</div>
      <div>价格</div>
      <div>数量</div>
    </header>
   
    <main>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
      <div>
        <div>电视机</div>
        <div>大型彩色电视机</div>
        <div>1000卢布</div>
        <div>10台</div>
      </div>
    </main>
  </div>
</div>

CSS

.mobile-container {
  width: 30%;
  border: 1px solid red;
  display:flex;
  flex-direction: column;
  align-items: center;
  position:relative;
}

h1 {
  text-align: center;
}

.table {
  display: grid;
  overflow-x: auto;
  border: 1px solid #DCDCDC;
  border-radius: 0.5rem;
  width: 90%;
  box-sizing: border-box;
  position: relative;
  max-height: 60vh; /* 给表格设置固定高度，方便测试滚动 */
  overflow-y: auto;
}

.table header {
  height: 2.625rem;
  display: grid;
  padding: 0.6875rem 1.25rem;
  color: #8C8C8C;
  border-bottom: 1px solid #DCDCDC;
  box-sizing: border-box;
  background: #FAFAFA;
  grid-template-columns: repeat(2, 15rem) repeat(2, 5rem);
  white-space: nowrap;
  column-gap: 1rem;
  z-index:10;
  top: 0;
  width: 100%;

  div:nth-child(1) {
    display: none;
  }
}

/* 新增固定表头的类 */
.table.header-fixed header {
  position: fixed;
  top: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 加阴影区分表头和内容 */
}

.table main {
  > div {
    display: grid;
    grid-template-columns: repeat(2, 15rem) 6rem;
    row-gap: 0.25rem;
    column-gap: 1rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid #DCDCDC;
    box-sizing: border-box;
    
    div:first-child {
      grid-column: 1 / -1;
      position: sticky;
      left: 1.25rem;
      z-index: 1;
      white-space: nowrap;
      width: min-content;
    }
  }
}

JavaScript

const table = document.querySelector('.table');
const header = document.querySelector('.table header');
// 保存表头原始样式，用于恢复
const headerOriginalStyles = {
  position: header.style.position,
  top: header.style.top,
  left: header.style.left,
  width: header.style.width
};

// 监听window滚动，控制表头固定状态
window.addEventListener('scroll', () => {
  const tableRect = table.getBoundingClientRect();
  const headerHeight = header.offsetHeight;

  // 表格顶部超出视口，且表格底部未完全离开视口
  if (tableRect.top < 0 && tableRect.bottom > headerHeight) {
    // 计算表头的left偏移，保证和表格对齐
    const leftOffset = tableRect.left + window.scrollX;
    header.style.position = 'fixed';
    header.style.top = '0';
    header.style.left = `${leftOffset}px`;
    header.style.width = `${table.offsetWidth}px`;
    table.classList.add('header-fixed');
  } else {
    // 恢复表头原始样式
    Object.assign(header.style, headerOriginalStyles);
    table.classList.remove('header-fixed');
  }
});

// 监听表格横向滚动，同步表头滚动位置
table.addEventListener('scroll', () => {
  if (table.classList.contains('header-fixed')) {
    header.scrollLeft = table.scrollLeft;
  }
});

// 窗口大小变化时，重新计算表头位置和宽度
window.addEventListener('resize', () => {
  if (table.classList.contains('header-fixed')) {
    const tableRect = table.getBoundingClientRect();
    const leftOffset = tableRect.left + window.scrollX;
    header.style.left = `${leftOffset}px`;
    header.style.width = `${table.offsetWidth}px`;
  }
});

方案优势

彻底解决sticky定位的晃动问题，fixed定位不受父容器滚动影响；
横向滚动时表头和内容完全同步，不会错位；
兼容窗口大小变化，自动调整表头位置和宽度。

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

如何在滚动时固定表头？解决父容器带横向滚动的表头晃动问题

需求说明 #

可行方案实现思路 #

具体实现步骤 #

修改后的完整代码 #

HTML（修正原标签闭合错误） #

CSS #

JavaScript #

方案优势 #