使用element.scrollIntoView时平滑滚动失效问题求助

核心问题 #

1. 滚动位置变量未实时更新：你的scrollPosition仅在页面初始化时获取一次，没有在scroll事件回调内实时更新，导致判断条件scrollPosition == 0始终是页面加载时的初始值，逻辑触发存在偏差。
2. 滚动事件冲突：在原生scroll事件中直接触发平滑滚动时，浏览器的手动滚动动作会与你触发的平滑滚动产生冲突，浏览器会优先响应用户的手动滚动，中断平滑动画。

修复后的代码 #

滚动目标函数

function scroll_to_target() {
  const element = document.getElementById("downarrow");
  element.scrollIntoView({ behavior: "smooth" });
}

修正后的触发逻辑

let hasScrolled = false;
window.addEventListener("scroll", function() {
  // 实时获取当前滚动位置
  const scrollPosition = window.scrollY || document.documentElement.scrollTop;
  
  // 判断：当前在顶部，且未触发过滚动动作
  if (scrollPosition === 0 && !hasScrolled) {
    hasScrolled = true;
    // 使用requestAnimationFrame延迟触发，避免与原生滚动冲突
    requestAnimationFrame(() => {
      scroll_to_target();
    });
  }
  
  // 当滚动回顶部时，重置标志位，允许下次触发
  if (scrollPosition === 0 && hasScrolled) {
    hasScrolled = false;
  }
});

补充说明 #

• 用window.scrollY或document.documentElement.scrollTop替代jQuery的scrollTop()，减少依赖同时更精准获取滚动位置。
• requestAnimationFrame让平滑滚动在浏览器下一次重绘时执行，避开原生滚动事件的冲突，确保动画正常运行。
• 增加重置hasScrolled的逻辑，用户滚动回顶部后，再次滚动可重新触发目标动作。

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