PWA应用中跳转页面时如何中断平滑滚动避免页面半加载异常

你遇到的跳转后页面半幅显示的异常，核心原因是浏览器原生平滑滚动属于逐帧执行的异步任务：触发scrollIntoView({behavior: 'smooth'})类的平滑滚动后，浏览器会持续计算每帧的滚动位置、更新视口，直到滚动到目标点位。如果在动画执行途中触发路由跳转，未执行完的滚动动画不会自动终止，会和新页面挂载时的滚动初始化逻辑产生冲突，最终导致视口位置错乱、新旧页面渲染异常。
目前浏览器没有提供原生的取消平滑滚动接口，行业内通用的终止逻辑，是通过同步无动画的滚动指令强制打断正在运行的异步滚动任务，这个方案在所有现代浏览器上都有稳定表现。

1. 封装全局滚动终止工具 #

对所有存在滚动行为的容器，用当前实际滚动位置做无动画的同步重设，直接覆盖之前的平滑滚动任务：

// 终止所有正在运行的平滑滚动动画
const stopAllSmoothScroll = () => {
  // 处理全局视口滚动
  const currentY = window.scrollY
  const currentX = window.scrollX
  window.scrollTo({
    top: currentY,
    left: currentX,
    behavior: 'auto' // 必须指定无动画模式，才能打断已有滚动任务
  })

  // 遍历处理页面内部的自定义滚动容器（存在内部滚动的场景需要加这段）
  document.querySelectorAll('[data-scroll-container]').forEach(container => {
    const cTop = container.scrollTop
    const cLeft = container.scrollLeft
    container.scrollTo({
      top: cTop,
      left: cLeft,
      behavior: 'auto'
    })
  })
}

2. 全局拦截跳转链接的点击行为 #

通过事件委托在全局监听点击事件，一旦检测到跳转链接的点击，先执行滚动终止逻辑，再放行正常的路由跳转流程，不需要给每个a标签单独绑定事件，可覆盖所有动态渲染的链接元素：

document.addEventListener('click', (e) => {
  // 匹配点击范围内的所有带href的a标签
  const targetLink = e.target.closest('a[href]')
  if (!targetLink) return

  // 可选：根据业务需求过滤不需要拦截的链接，比如外链、锚点、下载链接
  // if (targetLink.origin !== window.location.origin || targetLink.hasAttribute('download')) return

  // 跳转执行前先终止所有残留滚动动画
  stopAllSmoothScroll()
})

原有回到顶部逻辑可简单增加状态锁，避免用户在平滑滚动途中重复触发导致的动画冲突：

let isScrollingToTop = false
const scrollTop = () => {
  if (isScrollingToTop) return
  isScrollingToTop = true
  document.querySelector("#top").scrollIntoView({ behavior: "smooth" })
  // 滚动结束后释放锁，可根据实际动画时长调整延迟时间
  setTimeout(() => isScrollingToTop = false, 500)
}

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