动态添加行后，如何实现tbody滚动至底部（替代scrollTop方案）

你遇到的这个问题其实很常见，核心原因是默认情况下tbody并不是一个独立的可滚动容器，所以scrollTop属性没生效。下面给你两个经过验证的解决方法，完全避开你提到的焦点设置和scrollIntoView的IE偏移问题：

方法一：正确配置CSS让tbody成为滚动容器，再用scrollTop #

首先要通过CSS把tbody设置成可滚动的块级元素，这样它就会拥有scrollTop属性了：

#myTable tbody {
  display: block;
  height: 300px; /* 根据你的需求设置固定高度，触发滚动 */
  overflow-y: auto;
}
/* 保持表头和表体的列宽一致 */
#myTable thead, #myTable tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

之后在添加新行后，直接设置scrollTop等于tbody的scrollHeight（内容总高度）就能滚到底部：

const tbody = document.querySelector('#myTable > tbody');
// 添加新行的代码...
tbody.scrollTop = tbody.scrollHeight;

这个方法在IE里完全兼容，不会有偏移问题，也是最直接的解决方案。

方法二：使用scrollTo方法替代scrollTop #

如果因为某些原因不想调整CSS（不过还是推荐上面的方法），或者想更灵活控制滚动行为，可以用scrollTo方法：

const tbody = document.querySelector('#myTable > tbody');
// 添加新行的代码...
tbody.scrollTo({
  top: tbody.scrollHeight,
  behavior: 'auto' // 即时滚动，IE支持；如果需要平滑滚动可以改成'smooth'，但IE不支持
});

这个方法的原理和上面一致，都是利用scrollHeight定位到内容最底部，同样能避开scrollIntoView的IE问题。

补充说明 #

之前你的scrollTop无效，本质是tbody没有被设置为独立的滚动容器——默认table的tbody是和table共享布局的，不会产生滚动条，自然也没有scrollTop属性。只要通过CSS把它改成块级元素并设置固定高度，就能解决这个核心问题。

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