原生JS实现overflow表格重绘后保留滚动位置，如何避免强制重排警告

优先纯CSS实现（无JS、无重排警告） #

你可以直接利用浏览器原生的**滚动锚定（Scroll Anchoring）**特性实现自动保留滚动位置，完全不需要JS操作滚动属性，也就不会触发强制重排警告：

• 不要替换设置了overflow: auto的外层滚动容器节点，仅替换容器内部的<table>表格内容
• 给外层滚动容器添加如下CSS声明即可：

/* 替换为你的表格滚动容器实际类名 */
.table-scroll-wrapper {
  overflow: auto;
  overflow-anchor: auto; /* 显式开启滚动锚定，现代浏览器默认值就是auto，添加后兼容性更稳定 */
}

浏览器会自动在内部表格内容更新后，调整滚动偏移量，保持用户之前浏览的位置不变，整个过程由浏览器原生布局流程处理，无额外性能开销。

兼容场景JS优化方案 #

如果你有特殊场景无法使用纯CSS方案，可以通过调整JS执行时机消除强制重排警告，核心是避免在DOM更新后同步设置滚动属性，让滚动操作嵌入浏览器正常的绘制流程：

// 1. 滚动监听存储逻辑可保留，建议加防抖减少不必要的存储操作
let scrollSaveTimer = null
const scrollContainer = document.querySelector('.table-scroll-wrapper')
scrollContainer.addEventListener('scroll', () => {
  clearTimeout(scrollSaveTimer)
  scrollSaveTimer = setTimeout(() => {
    sessionStorage.setItem('tableScrollLeft', scrollContainer.scrollLeft)
  }, 80)
})

// 2. 新表格渲染完成后调用恢复逻辑，将滚动设置放到requestAnimationFrame回调
function restoreScroll() {
  const targetLeft = Number(sessionStorage.getItem('tableScrollLeft')) || 0
  requestAnimationFrame(() => {
    scrollContainer.scrollTo({
      left: targetLeft,
      behavior: 'instant'
    })
  })
}

调整后滚动设置会在浏览器下一次重绘前执行，不会打断当前的布局计算流程，也就不会触发强制重排警告。

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