JavaScript 实现下拉滚动加载更多数据 - 代码示例

#loading {
  display: none;
  text-align: center;
}

var page = 1; // 当前页码
var loading = false; // 是否正在加载
var maxPage = 10; // 最大页码

// 判断是否滚动到底部
function isScrollToBottom() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  return scrollTop + windowHeight >= scrollHeight;
}

// 加载数据
function loadData() {
  if (page > maxPage) {
    // 已经加载完全部数据
    return;
  }
  loading = true;
  // 显示加载提示
  document.getElementById("loading").style.display = "block";
  // 模拟异步加载数据
  setTimeout(function() {
    // 隐藏加载提示
    document.getElementById("loading").style.display = "none";
    // 追加数据
    var content = document.getElementById("content");
    for (var i = 1; i <= 10; i++) {
      var item = document.createElement("div");
      item.className = "item";
      item.innerHTML = "第" + ((page - 1) * 10 + i) + "条数据";
      content.appendChild(item);
    }
    page++;
    loading = false;
  }, 2000);
}

// 监听滚动事件
window.onscroll = function() {
  if (isScrollToBottom() && !loading) {
    loadData();
  }
}

说明：

1. 页面初始时只有一个空的<div>元素用于显示数据，另一个<div>元素用于显示加载提示，初始时设置为隐藏。
2. loadData()函数用于异步加载数据并追加到页面上。在实际应用中，该函数需要根据实际情况进行修改。
3. 监听滚动事件，并在滚动到页面底部且当前未在加载数据时调用loadData()函数。
4. 根据实际情况修改maxPage变量，当加载到最大页码时停止加载。
5. 根据实际情况修改isScrollToBottom()函数，该函数用于判断是否滚动到页面底部。