基于JavaScript开发无限滚动加载功能

1. 简介

无限滚动加载是指在页面滚动至末尾时自动进行下一部分数据加载，实现在用户浏览过程中不断获取更多数据的效果。在实际开发中，无限滚动加载功能通常应用于文章列表、商品列表、社交媒体等长列表页面。

2. 实现

实现无限滚动加载的方法有多种，例如使用jQuery、Vue、React等各类前端框架，但在这篇文章中，我们将使用纯JavaScript来实现。实现的基本思路是监听页面滚动事件，当滚动到页面底部时触发数据的加载。

2.1 监听滚动事件

我们需要通过监听window对象的scroll事件，判断用户是否已经滚动到了页面底部。监听scroll事件的代码如下：

window.addEventListener('scroll', function() {
  // 判断滚动条是否已经到达页面底部
});

该代码段中，window.addEventListener('scroll', function() {})为监听scroll事件的方法，其中function() {}是回调函数。

2.2 判断是否到达底部

接下来，我们需要判断页面滚动是否到底部。我们可以根据以下方法来判断：

滚动条滚动的距离scrollY+当前窗口的高度innerHeight是否等于页面的高度document.body.clientHeight

滚动条滚动的距离scrollY+当前窗口的高度innerHeight是否等于文档的高度document.body.scrollHeight

这里我们使用第二种方法。

window.addEventListener('scroll', function() {
  if (window.scrollY + window.innerHeight === document.body.scrollHeight) {
    // 已到达页面底部
  }
});

2.3 触发数据加载

在判断当前是否到底部时，我们需要在满足条件时触发数据加载的功能。我们可以通过调用后台接口，获取新的数据（通常是JSON格式数据），并使用JavaScript将其渲染到页面上。

window.addEventListener('scroll', function() {
  if (window.scrollY + window.innerHeight === document.body.scrollHeight) {
    // 已到达页面底部，开始加载新数据
    fetch('api/getData.php')
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
        // 将数据渲染到页面上
      });
  }
});

该代码段中，fetch('api/getData.php')是一个Promise对象，用于发起异步请求，并返回一个response对象。我们使用then()方法将该对象转换为JSON格式，并在成功时执行回调函数：将获取到的数据在页面上进行渲染。

2.4 避免重复加载

在实现无限滚动加载时，我们需要注意避免重复加载的情况。我们可以通过设置标志位，判断当前是否正在加载中，避免重复发起请求。

var isLoading = false;
window.addEventListener('scroll', function() {
  if (isLoading) return;
  if (window.scrollY + window.innerHeight === document.body.scrollHeight) {
    // 设置加载中标志位
    isLoading = true;
    // 已到达页面底部，开始加载新数据
    fetch('api/getData.php')
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
        // 将数据渲染到页面上
        // 清除加载中标志位
        isLoading = false;
      });
  }
});

3. 参考资料

Window: scroll 事件

使用Fetch