如何以变量作为终点调用array slice？解决无限滚动数组未更新问题

原代码的核心问题是：items只在脚本启动时执行了一次arr.slice(0, size)，滚动事件触发时仅修改了size变量，但没有重新生成新的items，也没有同步更新输出或页面内容。

要实现以变量作为终点调用slice扩展数组副本，需要在size变化后重新执行切片逻辑，并处理后续的更新操作，具体修改如下：

修改后的代码 #

let size = 1;
let arr = ["a", "b", "c", "d", "e"];
// 封装更新items的逻辑，方便重复调用
function updateItems() {
  let items = arr.slice(0, size);
  console.log(items);
  // 这里可以添加更新页面DOM的逻辑，比如把items渲染到页面上
}

window.addEventListener("scroll", () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  // 限制size不超过原数组长度，避免无效切片
  if (clientHeight + scrollTop >= scrollHeight - 1 && size < arr.length) {
    size += 1;
    console.log("adding");
    // size变化后调用更新函数
    updateItems();
  }
});

// 初始化时执行一次，确保初始状态正确
updateItems();

关键修改点 #

• 将生成items的逻辑封装成updateItems函数，每次size改变时调用它，重新执行slice操作并输出结果。
• 在滚动事件中增加了size < arr.length的判断，防止size超过原数组长度后重复无效操作。
• 初始化时调用updateItems，保证页面加载时就能看到初始的items内容。

这样每次滚动到底部时，size递增，然后重新通过arr.slice(0, size)生成新的数组副本，items就能正确更新了。

内容的提问来源于stack exchange，提问作者glpsx