如何将滚动条附着于horizontal viewport而非表格？

1. 手动触发滚动（基础方案） #

当用户选择更多行数、表格数据更新后，直接操作滚动容器的scrollTop属性，将其设置为容器的scrollHeight（内容总高度），就能让滚动条跳到底部。

// 获取滚动容器（替换成你的容器选择器）
const scrollContainer = document.querySelector('.table-scroll-container');

// 滚动到底部
scrollContainer.scrollTop = scrollContainer.scrollHeight;

如果是动态渲染数据，建议用requestAnimationFrame确保DOM更新完成后再执行滚动，避免无效操作：

requestAnimationFrame(() => {
  scrollContainer.scrollTop = scrollContainer.scrollHeight;
});

2. 自动监听内容变化（无需手动调用） #

用MutationObserver监听滚动容器的内容变化，当表格行数增加（子元素新增）时自动触发滚动。适合无法预知数据更新时机的场景：

const scrollContainer = document.querySelector('.table-scroll-container');
const observer = new MutationObserver(() => {
  requestAnimationFrame(() => {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  });
});

// 配置监听：监听容器内子元素的添加/移除
observer.observe(scrollContainer, { childList: true, subtree: true });

3. 框架场景下的适配 #

如果用React、Vue等框架，可以利用生命周期或响应式监听实现自动滚动：

React 示例

import { useEffect, useRef } from 'react';

function ScrollTable({ tableData }) {
  const containerRef = useRef(null);

  // 数据更新时触发滚动
  useEffect(() => {
    if (containerRef.current) {
      const container = containerRef.current;
      // 仅当内容超出容器高度时才滚动
      if (container.scrollHeight > container.clientHeight) {
        container.scrollTop = container.scrollHeight;
      }
    }
  }, [tableData]);

  return (
    <div 
      ref={containerRef} 
      style={{ overflow: 'auto', maxHeight: 'calc(100vh - 80px)' }}
    >
      <table>
        {/* 渲染表格内容 */}
      </table>
    </div>
  );
}

Vue 示例

<template>
  <div 
    ref="tableContainer" 
    style="overflow: auto; max-height: calc(100vh - 80px);"
  >
    <table><!-- 渲染表格内容 --></table>
  </div>
</template>

<script>
export default {
  props: ['tableData'],
  watch: {
    tableData: {
      handler() {
        this.$nextTick(() => {
          const container = this.$refs.tableContainer;
          if (container.scrollHeight > container.clientHeight) {
            container.scrollTop = container.scrollHeight;
          }
        });
      },
      deep: true
    }
  }
}
</script>

4. 锦上添花：平滑滚动 #

如果需要滚动过渡效果，给滚动容器添加CSS的scroll-behavior属性：

.table-scroll-container {
  scroll-behavior: smooth;
}

注意事项 #

• 确保滚动容器的overflow属性设置为auto或scroll，且有明确的高度/最大高度限制，否则不会出现垂直滚动条。
• 可以加入判断逻辑，只有当内容高度超出容器可视高度时才执行滚动，避免内容未溢出时的无效操作。

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