嵌套overflow属性的表格调用带参scrollIntoView不生效如何解决

问题根因 #

1. 存在双滚动容器冲突：你同时给外层div#old_slab和内部table#old_table都设置了overflow: auto，相当于存在两层嵌套的可滚动元素。scrollIntoView的options参数（behavior/block）属于新API，在多层滚动容器场景下的祖先元素判定逻辑和旧版布尔入参的逻辑不同，容易出现滚动失效的问题，而无参数的布尔形式属于早期兼容API，判定逻辑更简单，反而可以正常执行。
2. 动态行渲染时机不对：表格行是动态生成的，如果在DOM节点刚插入、还没完成浏览器重绘布局的时候就调用带options的scrollIntoView，新API需要读取节点的布局位置才能执行滚动，此时布局还未稳定就会失效，而旧版布尔API优先级更高，不需要等待完整布局就能触发。

解决方法 #

• 第一步：移除table上多余的滚动属性，只保留外层div作为滚动容器，修改CSS如下：

#old_slab{
  position: absolute;
  top:34em;
  left:30em;
  width:40em;
  height: 15em;
  overflow: auto; 
}

#old_table{
  width: 40em;
  /* 移除overflow:auto和固定高度，让表格内容自然撑开即可 */
  height: auto;
}

• 第二步：给滚动逻辑加渲染时机等待，确保DOM布局完成后再执行滚动，修改JS如下：

var table1 = document.getElementById("old_table");
// requestAnimationFrame会等待浏览器完成当前DOM重绘后再执行回调
requestAnimationFrame(() => {
  table1.rows[3].scrollIntoView({
    behavior: 'smooth',
    block: 'center'
  });
});

• 第三步：如果需要兼容旧版浏览器，可以加异常捕获做降级处理：

var table1 = document.getElementById("old_table");
try {
  table1.rows[3].scrollIntoView({
    behavior: 'smooth',
    block: 'center'
  });
} catch (e) {
  // 不支持options参数的环境回退到旧版写法
  table1.rows[3].scrollIntoView(true);
}

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