路由切换时如何自动识别页面滚动元素 无需硬编码选择器重置滚动位置

现有硬编码.overflow-scroll选择器的实现耦合度高，遇到不同页面滚动容器不一致、类名变更的场景会直接失效，可通过自动识别滚动容器的方案改造，无需写死选择器。

实现逻辑 #

滚动容器的判定规则：

1. 优先判断原生window根滚动：无自定义滚动容器的常规页面，滚动行为默认挂载在window上
2. 遍历DOM元素，筛选设置了overflow-y: auto/scroll、且内容实际溢出产生滚动条的元素，即为当前页面的自定义滚动容器
3. 所有场景兜底返回window，避免空值报错

完整实现代码 #

if (process.client) {
  /**
   * 自动查找当前页面生效的滚动容器
   * @returns {Window | HTMLElement} 滚动容器
   */
  const getActiveScrollContainer = () => {
    // 优先校验根滚动场景，性能最优
    const rootScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    // 根元素存在滚动偏移、或内容高度超出视口，直接返回window
    if (rootScrollTop > 0 || document.documentElement.scrollHeight > window.innerHeight) {
      return window
    }

    // 遍历DOM查找自定义滚动容器
    const allElements = document.body.querySelectorAll('*')
    for (const el of allElements) {
      const computedStyle = window.getComputedStyle(el)
      const overflowYVal = computedStyle.overflowY
      // 跳过无滚动属性的元素
      if (!['auto', 'scroll'].includes(overflowYVal)) continue
      // 校验元素是否实际产生滚动（内容高度超出容器高度），+1兼容浏览器小数像素计算误差
      if (el.scrollHeight > el.clientHeight + 1) {
        return el
      }
    }

    // 兜底返回window
    return window
  }

  router.afterEach(() => {
    // 等路由切换后的DOM更新完成再执行，避免取到旧页面元素
    setTimeout(() => {
      const container = getActiveScrollContainer()
      container.scrollTo({
        top: 0,
        left: 0
        // 如果要平滑滚动可以加 behavior: 'smooth'，路由重置场景建议直接瞬间跳转
      })
    }, 0)
  })
}

注意事项 #

• 路由切换后DOM更新是异步的，必须加setTimeout 0延迟到下一个事件循环执行查询，否则会拿到跳转前页面的元素
• 判断元素是否为滚动容器时，不能只校验overflow属性，必须同时判断内容是否溢出，否则会把设置了overflow但没有实际滚动条的元素误判
• 如果业务存在多容器嵌套滚动的场景（比如主内容区+侧边栏各自独立滚动），可以在遍历逻辑里把所有命中的滚动容器都收集起来，逐个执行scrollTo重置位置
• 对于Vue Router、React Router这类框架，官方提供的scrollBehavior配置默认仅处理window滚动，自定义容器场景用上述自动识别方案兼容性更好

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