当前位置：首页 > JavaScript

js实现滚动加载

2026-01-30 13:31:48JavaScript

滚动加载的实现方法

滚动加载（Infinite Scroll）是一种常见的前端技术，通过监听滚动事件动态加载更多内容，提升用户体验。以下是几种实现方式：

监听滚动事件 通过计算滚动位置判断是否接近底部，触发加载函数：

js实现滚动加载

window.addEventListener('scroll', function() {
  const scrollTop = document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const docHeight = document.documentElement.scrollHeight;

  if (scrollTop + windowHeight >= docHeight - 100) {
    loadMoreData();
  }
});

Intersection Observer API 更高效的现代API，避免频繁触发滚动事件：

js实现滚动加载

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadMoreData();
  }
});

observer.observe(document.querySelector('#load-more-trigger'));

实现注意事项

添加防抖机制避免频繁触发
显示加载状态提示（如旋转图标）
数据全部加载完成后移除监听器
移动端需考虑特殊处理

完整示例代码

let isLoading = false;
let page = 1;

async function loadMoreData() {
  if (isLoading) return;

  isLoading = true;
  showLoadingIndicator();

  try {
    const data = await fetch(`/api/data?page=${page}`);
    renderItems(data);
    page++;
  } catch (error) {
    console.error(error);
  } finally {
    isLoading = false;
    hideLoadingIndicator();
  }
}

// 使用Intersection Observer
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting && !isLoading) {
    loadMoreData();
  }
}, { threshold: 0.1 });

observer.observe(document.querySelector('#load-more-trigger'));