Ionic Vuejs滚动行为异常：页面跳转后停留在底部无法上移

数据老陈

2026-8-26

解决Ionic 6 + Vue 3路由滚动行为异常问题

在Ionic 6与Vue.js 3开发场景下，配置路由scrollBehavior后，页面跳转时窗口位置始终停留在底部，无法按预期回到顶部或恢复滚动位置。

以下是尝试过的两种scrollBehavior配置代码：

尝试方案1

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
    scrollBehavior(to, from, savedPosition) {
        return savedPosition || { top: 0 }
    },
})

尝试方案2

scrollBehavior(to, from, savedPosition) {
        if (savedPosition && to.meta.keepAlive) {
            return savedPosition;
        }

        return new Promise((resolve) => {
            setTimeout(() => {
                resolve({ x: 0, y: 0 });
            }, 5);
        });
    },

问题根源

Vue路由默认的scrollBehavior操作的是浏览器window对象的滚动，但Ionic的页面滚动容器是ion-content内部的独立滚动元素，而非window，因此默认配置无法生效。

修复方案

直接针对ion-content的滚动API进行操作，修改scrollBehavior如下：

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => {
      if (savedPosition && to.meta.keepAlive) {
        // 恢复保存的滚动位置
        const targetContent = document.querySelector(`${to.name} ion-content`);
        if (targetContent) {
          targetContent.scrollTo({ top: savedPosition.top, left: savedPosition.x, animated: true });
          resolve(savedPosition);
        }
      } else {
        // 默认滚动到顶部
        const currentContent = document.querySelector('ion-content');
        if (currentContent) {
          currentContent.scrollToTop({ animated: true });
          resolve({ top: 0 });
        }
      }
    }, 100); // 延迟时间适配Ionic页面渲染周期
  });
}