当前位置：首页 > JavaScript

js实现滚动加载

2026-03-01 04:36:18JavaScript

滚动加载的实现原理

滚动加载的核心原理是监听滚动事件，当用户滚动到页面底部或特定位置时触发数据加载。通过计算滚动位置、容器高度和滚动条位置的关系，判断是否需要加载更多内容。

基础实现步骤

监听窗口滚动事件，计算是否到达底部。当滚动条接近底部时，执行加载数据的函数。

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

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

function loadMoreData() {
  // 数据加载逻辑
}

优化性能的实现

使用节流函数减少滚动事件触发频率，避免性能问题。

let isLoading = false;

const throttledScrollHandler = throttle(function() {
  if (isLoading) return;

  const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 100) {
    isLoading = true;
    loadMoreData().finally(() => {
      isLoading = false;
    });
  }
}, 200);

window.addEventListener('scroll', throttledScrollHandler);

function throttle(fn, delay) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  };
}

使用Intersection Observer API

现代浏览器支持的更高效方法，不需要频繁计算滚动位置。

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

const sentinel = document.createElement('div');
document.body.appendChild(sentinel);
observer.observe(sentinel);

function loadMoreData() {
  // 加载数据后移动哨兵元素
  // ...
}

实际应用示例

结合AJAX请求实现完整的分页加载功能。

let currentPage = 1;
const pageSize = 10;

async function loadMoreData() {
  try {
    const response = await fetch(`/api/data?page=${currentPage}&size=${pageSize}`);
    const newData = await response.json();

    if (newData.length > 0) {
      renderData(newData);
      currentPage++;
    }
  } catch (error) {
    console.error('加载失败:', error);
  }
}

function renderData(data) {
  const container = document.getElementById('content-container');
  data.forEach(item => {
    const element = document.createElement('div');
    element.textContent = item.title; // 假设数据有title字段
    container.appendChild(element);
  });
}