如何修复基于jQuery floatThead的移动端粘性表格抖动问题？

我之前在做移动端粘性表格的时候也踩过类似的坑，结合你的代码来看，抖动的核心原因是滚动事件触发过于频繁导致的重绘卡顿，以及floatThead插件的表头滚动和你自定义的首列粘性滚动不同步。下面是具体的修复方案：

1. 用防抖函数减少scroll事件触发频率 #

移动端的scroll事件会在滚动过程中连续触发，每次修改left属性都会触发浏览器重排，性能不足时就会出现抖动。我们可以用防抖函数限制样式修改的频率：

// 先定义一个防抖函数
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

jQuery(function($) { 
  var table = $(".b-table"); 
  // 配置floatThead监听容器滚动，而不是window
  table.floatThead({ 
    position: "absolute", 
    top: 0,
    scrollContainer: function($table) {
      return $table.closest(".table-responsive");
    }
  }); 

  var tableWraps = $(".table-responsive"); 
  tableWraps.each(function() { 
    var tableWrap = $(this); 
    var headFirstColumn = tableWrap.find("td:first-child"); 
    // 用防抖包装scroll事件处理函数，延迟16ms（约60帧的间隔）
    const handleScroll = debounce(function() {
      headFirstColumn.css("left", this.scrollLeft + "px"); // 注意加上单位px
    }, 16);
    tableWrap.on("scroll", handleScroll); 
  }); 
});

2. 给首列添加硬件加速CSS #

通过CSS让首列使用GPU渲染，减少重绘卡顿：

.table-responsive td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  /* 开启硬件加速 */
  transform: translateZ(0);
  will-change: left;
}

3. 确保floatThead与容器滚动同步 #

原来的代码中floatThead默认监听window滚动，而你的表格是在.table-responsive容器内滚动，这会导致表头滚动和容器滚动不同步。通过设置scrollContainer选项，让插件直接监听容器的滚动事件，保证表头偏移和容器滚动完全匹配。

额外注意点 #

• 确保表格和容器的CSS布局没有冲突，比如不要给表格设置width: 100%同时容器有overflow-x: auto以外的复杂样式；
• 测试时尽量用真实设备，模拟器的滚动性能和真实设备有差异；
• 如果还是有轻微抖动，可以尝试把防抖的延迟调整到20ms左右，或者给表头也添加硬件加速的CSS属性。

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