Vue-router, transitions and scrollBehavior - Page jumping back to top or changing scroll location

[realcarbonneau]

There is currently a problem with the vue-router and vue-transitions (outside of Quasar) that causes pages to jump back to the top before transitions and also to change scroll location when doing popstate navigations (browser back and forward buttons. Here are some details, please post comments or questions on this topic here.

vue-router with scrollBehavior currently works when there are NO transitions. The users scroll position will be retained between popstate navigations.

export default new VueRouter({
  // mode: 'history',
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      // Keep scroll position when using browser buttons
      return savedPosition
    }
    else {
      return { x: 0, y: 0 }
    }
  }
})

Additionally, to ensure that the component state is retained (eg form field data, opened tabs, etc.) the keep-alive must be used

      <keep-alive>
        <router-view></router-view>
      </keep-alive>

For transitions on routes, there is a new Async scrollBehavior, but there are still some issues that are currently being worked on by the vue team. Here is the current partial solution. Note that the scrollBehavior delay is 1 second and the transition is 0.5s to emphasize the mechanics in play here.

export default new VueRouter({
  // mode: 'history',
  routes,
  scrollBehavior (to, from, savedPosition) {
    let position = { x: 0, y: 0 }
    // Keep scroll position when using browser buttons
    if (savedPosition) {
      position = savedPosition
    }

    // Workaround for transitions scrolling to the top of the page
    // However, there are still some problems being fixed by the vue team
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(position)
      }, 1000)
    })
  }
})

References:
https://router.vuejs.org/en/advanced/scroll-behavior.html

[pdanpdan]

This example might be useful:

https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js

[realcarbonneau]

That is the simplest use case, and it will do jumps in scroll position when combined with transitions.

Note line 24-26 of your example:

  if (savedPosition) {
    // savedPosition is only available for popstate navigations.
    return savedPosition

See the video, it's aweful :S

[Jamiewarb]

I'm also having this issue and looking for a solution

[piotrek-horodenski]

same problem here, scroll behavior should be invoked not sooner than leave transition finishes, I will probably temporarly fix it with disabling scroll behavior and emulate proper behavior manually

EDIT***
Just found some useful guides how to do it
vuejs/vue-router#1758
https://router.vuejs.org/en/advanced/scroll-behavior.html

[yiqianglin]

I'm also having this issue and looking for a solution

[tkiley]

I had this same problem. It looks like modern browsers set the scroll to savedPosition immediately when you navigate using the browser buttons, so returning a promise from scrollBehavior does not fix the flickering issue entirely.

In order to prevent the browser's default behavior, do this:

if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; }

Perhaps this should be included in the docs or should be set by the router by default?

[pdanpdan]

Use something along this lines:
In page:

<q-page-container>
  <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in" :duration="200" @after-leave="$root.$emit('triggerScroll')">
    <router-view />
  </transition>
</q-page-container>

In router initialization:

const Router = new VueRouter({
  ...
  scrollBehavior: (to, from, savedPosition) => new Promise((resolve) => {
    const position = savedPosition || {};
    if (!savedPosition) {
      if (to.hash) {
        position.selector = to.hash;
      }
      if (to.matched.some((m) => m.meta.scrollToTop)) {
        position.x = 0;
        position.y = 0;
      }
    }
    Router.app.$root.$once('triggerScroll', () => {
      Router.app.$nextTick(() => resolve(position));
    });
  }),
  routes,
});

[joantune]

Why is this closed? I'm getting the same issue with the <transition element without using VueRouters

[cybercussion]

Agreed I'm also having this issue still.
I did drop in the aforementioned history.scrollRestoration and after a cache clean reload I think it did solve it.

[nothingismagick]

Did you try this approach example @cybercussion ?
#1466 (comment)

[cybercussion]

@nothingismagick I used tkiley's approach and its good in Safari/Chrome. I think my cache was sticking.

[Mighty683]

I had this same problem. It looks like modern browsers set the scroll to savedPosition immediately when you navigate using the browser buttons, so returning a promise from scrollBehavior does not fix the flickering issue entirely.

In order to prevent the browser's default behavior, do this:

if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; }

Perhaps this should be included in the docs or should be set by the router by default?

I think such information should be placed in documentation

[jainsuneet]

if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; }

This is not working for me. Can you please give me an example ?

This is my code :

export default new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
    if ('scrollRestoration' in history) { 
        history.scrollRestoration = 'manual'; 
    }
    let position = { x: 0, y: 0 }
    if (savedPosition) {
      position = savedPosition
    }
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(position)
      }, 1000)
    })
  }
}) 

[pdanpdan]

Please head to VueRouter for this, thank you.