调用 scrollTo 后为什么没有触发 scrollend

按钮调用了 scrollTo()，但 scrollend 回调始终没有进入，最常见的原因不是事件监听失效，而是目标滚动位置根本没有变化。scrollend 只在滚动位置产生更新、所有待处理的滚动完成后触发；如果当前位置和目标位置相同，就没有“滚动完成”这件事。

另外，文档滚动和滚动容器是两个不同的事件目标。先判断位置是否改变，再确认监听对象，通常就能解决这个问题。

为什么 scrollTo 后可能没有 scrollend

把问题拆成两个值最容易定位：当前滚动位置和目标滚动位置。下面的代码故意把两种情况放在一起，注释只保留关键判断。

const currentTop = window.scrollY;
const targetTop = 400;

window.addEventListener("scrollend", () => {
  // 只有滚动位置真的更新并完成，这里才有机会执行
  console.log("document scrollend");
});

window.scrollTo({
  top: targetTop,
  behavior: "smooth",
});

console.log({ currentTop, targetTop });
// 当 currentTop 已经是 400 时，目标没有变化，不会触发 scrollend

这里的关键不是 behavior 是否为 smooth。平滑滚动会让位置在一段时间内更新，但它不会把“没有位移”变成一次滚动。排查时先打印 scrollY、目标 top，还要注意目标值可能已经被边界裁剪到最大滚动范围。

先确认监听的是正确的滚动对象

如果页面本身滚动，监听 document；如果是带 overflow: auto 的面板滚动，监听该面板元素。把事件绑在 window 上，并不能捕获任意容器的滚动完成。

const panel = document.querySelector(".result-panel");

document.addEventListener("scrollend", () => {
  // 只处理文档视图的滚动完成
  console.log("document finished");
});

panel.addEventListener("scrollend", () => {
  // 容器内部滚动完成，必须在容器上监听
  console.log("panel finished");
});

panel.scrollTo({
  top: 600,
  behavior: "smooth",
});

这个区分也适用于 scroll 事件：事件源是谁，完成事件就应该挂在谁身上。若页面只是某个列表区域在滚动，优先检查该元素的 scrollTop、scrollHeight 和 clientHeight，不要只看窗口的 scrollY。

让目标值、behavior 和回调职责对齐

如果业务是“滚到某个位置后刷新吸顶状态”，事件监听适合观察用户滚动和滚动吸附；如果业务是“代码发起一次滚动，结束后继续执行”，则应把程序化滚动的完成逻辑和这次调用放在一起。

async function revealResult() {
  const targetTop = 720;

  // 目标已在当前位置时，直接返回，避免等待一个不会发生的事件
  if (Math.abs(window.scrollY - targetTop) 

这种写法把“没有位移”和“滚动被打断”分开了：前者是调用前就能判断的正常分支，后者是滚动过程中可能出现的结果。不要把 scrollend 当成每次调用 scrollTo 都必然发送的确认包。

兼容旧环境时怎么安排降级

当前主流新版本浏览器已经支持 scrollend，但旧设备或旧浏览器仍可能没有它。若需要兼容，可以先做能力判断；对程序化平滑滚动优先使用调用返回值，对用户手势则再保留节流后的 scroll 兜底。

function onScrollFinished(target, callback) {
  if ("onscrollend" in target) {
    // 新环境直接使用原生完成事件
    target.addEventListener("scrollend", callback, { once: true });
    return;
  }

  let timer;
  target.addEventListener("scroll", () => {
    // 旧环境用短暂静默窗口近似判断滚动结束
    clearTimeout(timer);
    timer = setTimeout(callback, 120);
  });
}

降级逻辑只是近似判断，不能完全等价于原生事件。尤其是滚动吸附、触摸惯性和连续程序化调用场景，最好给业务回调增加请求序号或取消标记，避免旧的一次滚动覆盖新状态。

常见问题

scrollTo 使用 instant 也应该触发 scrollend 吗？

只要实际滚动位置发生更新，瞬时滚动也属于滚动位置变化；但如果目标和当前位置相同，仍然不会产生 scrollend。

为什么 document 有 scrollend，容器却没有？

先确认容器真的能滚动，并把监听挂到该元素上。页面滚动与元素滚动拥有不同的滚动上下文，监听 window 或 document 不会替代容器监听。

总结一下：先比较当前位置与目标位置，再确认滚动上下文，最后根据“观察所有滚动”还是“等待本次程序化调用完成”选择事件或 Promise。这样处理后，scrollend 没有触发就不再是一个模糊的浏览器故障，而是一个可以明确归类的状态。