scrollBehavior will be covered by the default rollback behavior of the browser

[Lpeanut]

Version

3.0.1

I'm sorry,I find it is so difficult to me to show it on JSFiddle, but I'll try my best to describe it as clear as possible.

Steps to reproduce

Well...I looked at the document of vue-router very seriously.And i also had read the source code of it. I think you create the method 'scrollBehavior' to control the scroll behavior when the history changes. When the popstate event is triggered, it will call the 'handleScroll' method.

Now i add those code

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

What is expected?

I expect the page always scroll to the top when the router have been changed. Whether it goes forward or backward.

What is actually happening?

But I find it works well when I create a new histroy in browser. Such as click a new link or call the pushState/replaceState methods. When I click the back button of the browser or call the history.back/forward/go methods( return to a page with a history in browser ),it dose work.

Finally I got the reason: the default rollback behavior of the browser will cover the behavior of scrollBehavior. it always scroll to the position that the browser default record.

When I set the History.scrollRestoration = 'manual'. It work well

---

May I suggest that when you create the router instance, check if there is a scrollBehavior attribute.If it exists,close the browser default rollback behavior in case of browser support.

Users can simulate the rollback behavior of a browser like this：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

thank you for read. Y(^_^)Y

[posva]

Using the scrollRestoration = 'manual' is the workaround for the moment. This is the PR that wants to change it #1814. Closing because the PR appeared before

[Lpeanut]

Yes, maybe I shouldn't get entangled in this question.But I still feel puzzled, because we set the history location and get it in the popstate event.But when we use it, we are covered by the browser's default behavior.Isn't it equivalent to doing useless work? I mean the behavior that set the position.

I understand that the setting position behavior is to achieve the browser rollback effect, but the browser has this function by default, do we have to deal with it specifically? Or,is there some special cases？

This makes me very puzzled, so I'd like to hear your thoughts.

I'm looking forward to your reply. Y(^_^)Y

[posva]

I think that if the setting exists is because people may want to modify it 😄 so it's ok to change it to manual if you need it