长列表优化每次只加载能看见的数据滚动到底部的时候再加载下一页的代码实现

这个功能可以通过监听滚动事件，判断当前滚动位置与列表总高度的关系来实现。具体实现步骤如下：

在列表容器上绑定滚动事件。
在滚动事件的回调函数中，获取当前滚动位置和列表总高度。
判断当前滚动位置是否已经滚动到列表底部，如果是，则加载下一页数据。
加载下一页数据后，更新列表容器的高度。

下面是一个示例代码实现：

// 列表容器
const listContainer = document.querySelector('.list-container');
// 每页数据数量
const pageSize = 10;
// 当前页数
let currentPage = 1;
// 列表总高度
let listHeight = 0;

// 加载一页数据
function loadNextPage() {
  // 模拟异步请求数据
  setTimeout(() => {
    // 生成新的列表项
    const newItems = Array.from({ length: pageSize }, (_, index) => {
      const item = document.createElement('div');
      item.textContent = `Item ${currentPage * pageSize + index}`;
      return item;
    });
    // 将新的列表项添加到列表容器中
    listContainer.append(...newItems);
    // 更新列表总高度
    listHeight += newItems.reduce((sum, item) => sum + item.offsetHeight, 0);
    // 更新当前页数
    currentPage++;
  }, 1000);
}

// 初始化加载第一页数据
loadNextPage();

// 绑定滚动事件
listContainer.addEventListener('scroll', () => {
  // 当前滚动位置
  const scrollTop = listContainer.scrollTop;
  // 列表容器高度
  const containerHeight = listContainer.offsetHeight;
  // 列表内容总高度
  const contentHeight = listContainer.scrollHeight;

  // 如果当前滚动位置已经到达列表底部
  if (scrollTop + containerHeight >= listHeight && scrollTop + containerHeight < contentHeight) {
    // 加载下一页数据
    loadNextPage();
  }
});

在这个示例中，我们通过不断加载新的列表项来模拟数据的加载。在滚动事件的回调函数中，我们首先获取当前滚动位置和列表总高度，然后判断当前滚动位置是否已经到达列表底部，如果是，则加载下一页数据。在加载完新的数据后，我们还需要更新列表总高度，以便下次判断是否到达列表底部。