scrollBehavior: Fires too early

jsonberry
154
jsonberry
commented 2 years ago

I'm relatively new to the Vue ecosystem (I have much ❤️ growing for it!), and I am having an issue with the vue-router scrollBehavior. I do not know if this is related to Nuxt, or if it's a vue-router issue.

Issue

scrollBehavior fires before route changes causing a very janky routing experience

Solution

Right now I am using this in my scrollBehavior:

    router: {
        scrollBehavior: function (to, from, savedPosition) {
            if (savedPosition) return savedPosition
            return false
        }
    },

For the pages that I need a scroll to top behavior, I am doing this in my page components:

mounted () {
    window.scrollTo(0, 0)
}

This is not giving me an ideal experience. I would still like to use a savedPosition for some pages, but I am using the mounted call to window to get around the jank and so those pages do not "use" the savedPosition as the scrollTo gets called after the component is mounted.

Setup

Default Nuxt scrollBehavior, at the time of this writing, the docs show this:

const scrollBehavior = (to, from, savedPosition) => {
  // savedPosition is only available for popstate navigations.
  if (savedPosition) {
    return savedPosition
  } else {
    let position = {}
    // if no children detected
    if (to.matched.length < 2) {
      // scroll to the top of the page
      position = { x: 0, y: 0 }
    }
    else if (to.matched.some((r) => r.components.default.options.scrollToTop)) {
      // if one of the children has scrollToTop option set to true
      position = { x: 0, y: 0 }
    }
    // if link has anchor,  scroll to anchor by returning the selector
    if (to.hash) {
      position = { selector: to.hash }
    }
    return position
  }
}

Expected

When I use a <nuxt-link> I should be routed to the new route, and for the cases when I should scroll to the top I should see the top of the next route.
AKA: The scrollBehavior should fire "between" routes or "after I have left a route, and before I have entered a new one".

Actual

When I use a <nuxt-link> for the cases when I should scroll to the top, I first see a scroll to top behavior of the route that I am currently on (so it flashes to the top of the page if I am scrolled down), and then I am routed to my new route.

TODO

  • Include a repo soon, if necessary, for reproducing the issue.
  • Update solution section with a better solution than what I currently have
2
SalvadorDuran
5
SalvadorDuran
commented 2 years ago

I confirmed this issue. Here's an example:
https://media.giphy.com/media/26gR0KE4IkKwPg8Mg/giphy.gif

1
jsonberry
154
jsonberry
commented 2 years ago

Here's another example
scroll_behavior

2
vinhtq
0
vinhtq
commented 2 years ago

+1 Confirmed

0
jerakode
8
jerakode
commented 2 years ago

Could you stop posting this horrible GIFs?

0
jerakode
8
jerakode
commented 2 years ago

This issue was asking like 10 times already - use search - https://github.com/nuxt/nuxt.js/issues/957

0
pi0
31.7k
pi0
commented 2 years ago

@jerakode We are all people here who spend our time to help others for Free. Be cool dude :)
@jsonberry If you confirm this is dup of #957 we may close related issues and keep one for easier tracking.

0
jerakode
8
jerakode
commented 2 years ago

@pi0 how your comment is related? I don't want to load 20mb stupid GIF's that literally shows nothing. Imagine, I am from some Uganda, Iran or another shithole with bad internet and paid traffic. We should respect one another, right? 👿

0
jerakode
8
jerakode
commented 2 years ago

Of course it's related, I asked multiple times about this. This is vue-router issue, that has no solution yet - https://github.com/vuejs/vue-router/issues/1373

0
pi0
31.7k
pi0
commented 2 years ago

I'm from Iran, But respect to others and help to fix instead of shouting :) Closing in the flavour of #1002.

2
jerakode
8
jerakode
commented 2 years ago

@pi0 cmon, dude, #1002 is another issue, doesn't related with this! Argh….

0
pi0
31.7k
pi0
commented 2 years ago

Just trying to use search finding 10 more dups as was mentioned! PS: No action from me regarding ScrollTo issues anymore.

0
jerakode
8
jerakode
commented 2 years ago

@pi0 yeah, I forgot that big issue was deleted after Github ban account. So you now can't find it in search, my bad.

This issue was in Roadmap, but @Atinux removed it 2 weeks ago.

Sorry about Iran, but looking to your Twits you don't like Iran much, or may be it just Twitter translate works bad, ha-ha. Too bad, that some patriotic offence will keep Nuxt jerking when ScrollToTop 😄

0
jsonberry
154
jsonberry
commented 2 years ago

@pi0
This is not a dupe of #1002 or #957 but it is related
It does seem to be related to this issue: https://github.com/vuejs/vue-router/issues/1373
In light of ☝️ it looks like this issue is being tracked.

1
Atinux
26.4k
Atinux
commented 2 years ago

Hi @jsonberry,

Indeed we are aware of this issue and we are working with Vue.js team to fix it.

@jerakode I cannot accept some racist comments on our repository, you've been warned.

0
Informations
QuestionUnresolved
#c899 - Created 2 years ago