监听滚动事件实现无限滚动：如何判断表格滚动状态触发加载？

嘿，这个问题我之前做后台系统的时候刚好踩过坑，其实核心就是通过滚动容器的属性结合行高，算出当前还有多少未展示的行，下面给你一步步拆解：

核心思路 #

要判断视口外只剩10条数据，我们需要三个关键值：

• 滚动容器的总高度（包含所有内容，包括不可见部分）
• 当前滚动的位置
• 容器的可见高度
  再结合单条数据的行高，就能算出剩余未展示的行数，达到阈值就触发加载。

具体实现步骤 #

1. 先拿到必要的DOM元素和参数 #

首先得确定你的表格滚动容器——有时候是表格本身（给table加overflow: auto），更多时候是外层的div容器。然后拿到表格的行元素，提前算好行高（假设行高统一，如果不统一后面说处理方法）：

// 滚动容器（根据你的实际DOM结构调整ID）
const scrollContainer = document.getElementById('table-container');
// 表格的tbody（用来渲染新数据）
const tableBody = document.getElementById('data-tbody');
// 阈值：剩余10条时触发加载
const threshold = 10;
// 加载锁：防止重复请求
let isLoading = false;
let currentPage = 1;

2. 监听滚动事件，计算剩余行数 #

在滚动事件里，我们计算几个关键数值，再转换成剩余行数：

scrollContainer.addEventListener('scroll', () => {
  // 先获取单条行的高度（取第一行即可，假设行高统一）
  const rowHeight = tableBody.querySelector('tr')?.offsetHeight || 0;
  if (!rowHeight) return; // 没有数据的时候直接返回

  // 滚动容器的总内容高度
  const totalScrollHeight = scrollContainer.scrollHeight;
  // 当前滚动的距离（从顶部到滚动位置的距离）
  const currentScrollTop = scrollContainer.scrollTop;
  // 容器的可见高度
  const visibleHeight = scrollContainer.clientHeight;

  // 计算还没滚动到的剩余高度
  const remainingHeight = totalScrollHeight - (currentScrollTop + visibleHeight);
  // 把剩余高度转换成剩余行数
  const remainingRows = Math.floor(remainingHeight / rowHeight);

  // 当剩余行数<=10，且不在加载中时，触发加载
  if (remainingRows <= threshold && !isLoading) {
    loadMoreData();
  }
});

3. 加载数据的核心函数 #

别忘了加加载锁，避免用户快速滚动时多次请求：

async function loadMoreData() {
  isLoading = true;
  try {
    // 这里替换成你的实际接口请求，比如分页请求
    const newData = await fetch(`/your-api-endpoint?page=${++currentPage}`).then(res => res.json());
    
    // 把新数据渲染成表格行
    newData.forEach(item => {
      const row = document.createElement('tr');
      // 替换成你的表格列内容
      row.innerHTML = `
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.date}</td>
      `;
      tableBody.appendChild(row);
    });
  } catch (err) {
    console.error('加载数据失败:', err);
  } finally {
    isLoading = false;
  }
}

处理特殊情况与优化 #

• 行高不统一：如果你的表格行高不一样，可以提前把每一行的高度存在数组里，然后计算当前滚动位置对应的已展示行数，用总行数减去已展示行数得到剩余行数。
• 性能优化：如果觉得scroll事件触发太频繁，可以加个防抖，避免频繁计算影响性能：

  let debounceTimer;
  scrollContainer.addEventListener('scroll', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      // 上面的计算逻辑放这里
    }, 100);
  });
  

• 更优雅的方案：Intersection Observer
  这是现代浏览器支持的API，不用监听scroll事件，而是在表格最后加一个占位的触发元素，当这个元素进入视口附近时触发加载：

  // 在tbody最后加一个触发元素
  const trigger = document.createElement('tr');
  trigger.className = 'load-trigger';
  trigger.style.height = `${threshold * rowHeight}px`; // 提前10行的高度触发
  tableBody.appendChild(trigger);
  
  // 创建观察者
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting && !isLoading) {
      loadMoreData();
    }
  }, { root: scrollContainer });
  
  observer.observe(trigger);
  

  这种方法性能更好，不用频繁计算滚动属性。

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