如何用JS/VueJS获取可滚动HTML表格当前的首行与末行

先把你提到的Stack Overflow原问题翻译成中文：

确定HTML表格中的首行
我有一个带滚动条的HTML表格，当用户滚动表格时，需要确定当前显示在顶部的是哪一行，有没有办法用JavaScript实现？

之前的方案误差大，大概率是没考虑行高不一致、滚动容器边界判断不精准的问题，下面是精准实现的代码：

HTML结构示例 #

<!-- 注意：表格要设置display:block才能让max-height和overflow生效，tbody会继承滚动 -->
<table id="scrollTable" style="max-height: 300px; overflow-y: auto; display: block; width: 100%;">
  <thead>
    <tr>
      <th>序号</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- 这里放动态生成的行 -->
  </tbody>
</table>

原生JS实现代码 #

// 获取核心元素
const tbody = document.getElementById('tableBody');
const rows = tbody.querySelectorAll('tr');

// 计算当前可见首末行的函数
function getVisibleRowRange() {
  // 滚动容器的顶部和底部边界
  const containerScrollTop = tbody.scrollTop;
  const containerBottom = containerScrollTop + tbody.clientHeight;
  
  let firstVisibleIdx = -1;
  let lastVisibleIdx = -1;

  rows.forEach((row, idx) => {
    // 行的顶部和底部坐标（相对于tbody）
    const rowTop = row.offsetTop;
    const rowBottom = rowTop + row.offsetHeight;

    // 判断行是否可见：只要行和容器视口有重叠就算可见
    const isVisible = rowBottom > containerScrollTop && rowTop < containerBottom;

    if (isVisible) {
      // 记录第一个可见行
      if (firstVisibleIdx === -1) firstVisibleIdx = idx;
      // 持续更新最后一个可见行
      lastVisibleIdx = idx;
    }
  });

  return {
    firstRowIndex: firstVisibleIdx,
    lastRowIndex: lastVisibleIdx,
    firstRow: firstVisibleIdx !== -1 ? rows[firstVisibleIdx] : null,
    lastRow: lastVisibleIdx !== -1 ? rows[lastVisibleIdx] : null
  };
}

// 监听滚动事件，实时计算
tbody.addEventListener('scroll', () => {
  const visibleRange = getVisibleRowRange();
  console.log(`可见首行索引：${visibleRange.firstRowIndex}，可见末行索引：${visibleRange.lastRowIndex}`);
  // 这里可以根据需求做其他操作，比如高亮首末行、更新统计等
});

关键说明 #

• 用offsetTop获取行相对于tbody的顶部坐标，避免了父元素嵌套的坐标误差
• 判断可见性时，只要行与容器视口有重叠就算可见（包括只显示一半的行），符合日常使用场景
• 支持行高不一致的情况，每一行都单独计算高度

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