Vue Router 路由跳转hash时水平滚动功能失效问题咨询

问题产生原因 #

• 自定义scrollBehavior配置仅传入了垂直滚动的top参数，未配置水平滚动对应的left参数，因此只会触发垂直滚动，完全不会触发水平滚动逻辑。
• 目标元素使用transform: translateX(100%)实现位置偏移，该属性属于渲染层的视觉偏移，不会修改元素的布局属性offsetLeft，如果直接读取offsetLeft作为水平滚动的目标值，拿到的是元素在正常文档流中的左偏移量，和视觉上的真实偏移量不符，导致水平滚动位置计算错误。

解决方法 #

方案1：调整元素定位属性+修改滚动配置 #

首先修改目标元素的CSS，用布局属性left代替transform实现偏移，保证offsetLeft可以读取到正确的偏移值：

.about {
  position: absolute;
  left: 100%; /* 替换原有transform: translateX(100%) */
  height: 100vh;
  width: 100%;
}

再修改scrollBehavior配置，同时传入水平和垂直的滚动参数：

scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
        const targetEl = document.querySelector(to.hash)
        if (targetEl) {
            return {
                top: targetEl.offsetTop,
                left: targetEl.offsetLeft,
                behavior: 'smooth'
            }
        }
    }
    return { top: 0, left: 0, behavior: 'smooth' }
}

方案2：不修改CSS，直接计算元素真实偏移 #

如果需要保留transform定位逻辑，可以通过getBoundingClientRect读取元素的真实视觉偏移量，再计算滚动目标值：

scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
        const targetEl = document.querySelector(to.hash)
        if (targetEl) {
            const rect = targetEl.getBoundingClientRect()
            // 计算真实的滚动目标位置
            const targetLeft = window.scrollX + rect.left
            const targetTop = window.scrollY + rect.top
            return {
                top: targetTop,
                left: targetLeft,
                behavior: 'smooth'
            }
        }
    }
    return { top: 0, left: 0, behavior: 'smooth' }
}

内容的提问来源于stack exchange，提问作者Artur Müller Romanov