HTML表格固定列在Firefox、Edge中水平滚动抖动问题求助

我之前也踩过类似的坑！Chrome对滚动事件的渲染优化做得比较好，但Firefox和Edge确实容易出现固定列抖动的情况，尤其是用JS控制定位的时候。结合你的情况，咱们可以从这几个方向来修复：

1. 用requestAnimationFrame同步样式更新 #

scroll事件触发得非常频繁，直接在事件里修改DOM样式会导致浏览器频繁重排重绘，进而产生抖动。把样式更新逻辑包在requestAnimationFrame里，能让它和浏览器的重绘周期同步，减少延迟：

// 提前缓存DOM元素，避免每次scroll都查询DOM
const tbody = document.querySelector('tbody');
const thead = document.querySelector('thead');
const fixedTheadThs = document.querySelectorAll('thead th.fixed');

tbody.addEventListener('scroll', function(e) {
  requestAnimationFrame(() => {
    // 只获取一次scrollLeft，避免多次读取导致的数值不一致
    const scrollOffset = this.scrollLeft;
    
    // 更新thead的偏移
    thead.style.left = `-${scrollOffset}px`;
    // 更新固定列的偏移
    fixedTheadThs.forEach(th => {
      th.style.left = `${scrollOffset}px`;
    });
    
    // 补全你原来tbody的样式设置
    // tbody.style.xxx = ...
  });
});

2. 优化CSS渲染提示 #

给固定列和thead添加will-change属性，告诉浏览器这些元素的left属性会频繁变化，让浏览器提前做好渲染优化：

thead, thead th.fixed {
  will-change: left;
  position: relative; /* 确保left属性能生效 */
  background-color: #fff; /* 避免滚动时被后面的内容穿透 */
}

tbody {
  overflow-x: auto;
}

3. 试试纯CSS的position: sticky方案（更推荐） #

如果你的目标浏览器支持sticky（现代主流浏览器都支持），完全可以抛弃JS控制，用原生CSS实现固定列，抖动问题会大幅减少：

/* 表头固定列 */
thead th.fixed:nth-child(1) {
  position: sticky;
  left: 0;
  background: #fff;
}
thead th.fixed:nth-child(2) {
  position: sticky;
  left: 160px; /* 这里的值等于前一列的宽度，确保列对齐 */
  background: #fff;
}

/* 表格体固定列 */
tbody td.fixed:nth-child(1) {
  position: sticky;
  left: 0;
  background: #fff;
}
tbody td.fixed:nth-child(2) {
  position: sticky;
  left: 160px;
  background: #fff;
}

这个方案不需要任何JS，浏览器原生处理滚动定位，流畅度会比JS控制好很多，而且能避免跨浏览器的兼容性问题。

额外注意点 #

• 确保thead和tbody的列宽完全一致，否则滚动时会出现错位，看起来像抖动；
• 避免在scroll事件里做复杂的计算或DOM查询，这些都会增加延迟；
• 如果必须用JS控制，尽量减少样式修改的次数，一次性把所有需要更新的样式都处理完。

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