滚动加载功能实现咨询：自动滚动到底部与避免重复加载问题

嗨，很高兴看到你已经完成了滚动加载的核心功能！针对你遇到的两个问题，我来帮你一步步解决：

问题1：加载新数据后自动滚动到底部 #

要实现加载完成后自动滚动到最新内容，只需要在数据渲染完成后，手动设置容器的scrollTop为其scrollHeight即可——因为新数据添加后，容器的总滚动高度（scrollHeight）会增加，把scrollTop设为这个值就能直接滚到底部。

你可以修改addData函数，在末尾添加这行代码：

function addData() {
  let newData = data.splice(0, limit);
  if (newData.length === 0) return;
  str = "";
  newData.forEach(e => {
    str += `  <li class="message">
<div class='id'>${e.id}</div>
<div>${e.title}</div>
</li>`
  });
  content.innerHTML += str;
  // 新增：自动滚动到底部
  content.scrollTop = content.scrollHeight;
}

问题2：避免自动滚动触发重复加载 #

你担心自动滚动到底部会再次触发加载逻辑，其实我们可以通过一个临时标记来区分“用户主动滚动”和“代码自动滚动”，避免重复触发加载函数。

具体步骤：

1. 新增一个全局变量isAutoScrolling，用来标记当前是否是代码触发的自动滚动
2. 在设置自动滚动前，把isAutoScrolling设为true
3. 用requestAnimationFrame确保DOM更新完成后，把标记设回false
4. 在scroll事件监听里，先判断这个标记，如果是自动滚动就直接返回，不执行加载逻辑

修改后的完整代码如下（关键修改处已用注释标出）：

let str = ""
let limit = 4;
let offset = 0;
let data = [{
id: 5,
title: "title5"
},
{
id: 6,
title: "title6"
},
{
id: 7,
title: "title7"
},
{
id: 8,
title: "title8"
},
{
id: 9,
title: "title9"
},
{
id: 10,
title: "title10"
},
{
id: 11,
title: "title11"
},
{
id: 12,
title: "title12"
},
{
id: 13,
title: "title13"
},
{
id: 14,
title: "title14"
},
{
id: 15,
title: "title15"
}
];

// 新增：标记是否为自动滚动
let isAutoScrolling = false;

function addData() {
  let newData = data.splice(0, limit);
  if (newData.length === 0) return;
  str = "";
  newData.forEach(e => {
    str += `  <li class="message">
<div class='id'>${e.id}</div>
<div>${e.title}</div>
</li>`
  });
  content.innerHTML += str;
  // 新增：触发自动滚动前标记状态
  isAutoScrolling = true;
  content.scrollTop = content.scrollHeight;
  // 滚动完成后重置标记（确保DOM更新完成）
  requestAnimationFrame(() => {
    isAutoScrolling = false;
  });
}

let loading = false;
let content = document.querySelector('.content');
content.addEventListener('scroll', function() {
  // 新增：如果是自动滚动，直接返回
  if (isAutoScrolling || loading || data.length === 0) return;
  
  if (content.scrollTop + content.clientHeight >= content.scrollHeight) {
    loading = true;
    document.querySelector('.loading').style.display = 'block';
    setTimeout(() => {
      addData();
      document.querySelector('.loading').style.display = 'none';
      loading = false;
    }, 1000);
  }
});

另外，关于“每次只加载4条数据”的需求，你当前的代码已经通过data.splice(0, limit)完美实现了——splice(0,4)会从数组开头取出4条数据，剩下的数组会保留后续内容，所以每次触发加载都会取新的4条，直到数据为空，这个逻辑是没问题的。

额外小提示 #

• 你可以给scroll事件添加节流处理（比如用setTimeout限制触发频率），避免滚动时频繁触发事件，提升页面性能
• 当data为空后，可以隐藏加载提示，给用户一个“已加载全部内容”的提示，交互体验会更好

备注：内容来源于stack exchange，提问作者WEI A