pass on extra arguments to `scrollTo` to enable smooth scrolling with behaviour

[BorjaRafols]

What problem does this feature solve?

Smooth scrolling to same page anchor tags.

Right now smooth scrolling can only work by custom implementations, but the new Firefox spec contemplates a scrollBehaviour css property which can be polyfilled in older browsers.

Vue-router should take advantage of this new property

What does the proposed API look like?

Basically, the object returned from the scrollBehavior function should have some more parameters and change the current x, y positions into named parameters.

This is an example of the future object to be returned.

{
top: 2500, // this is the x value
left: 0, // this is the y value
behavior: 'smooth' //
};

This is getting implemented in most current browsers, couldn't find the spec thought. If anybody finds it please sahre the link.

Anyway, there is this beatyfull polyfill: https://www.npmjs.com/package/smoothscroll-polyfill

which adds this scrollTo({}) behaviour to old browsers.

I haven't dig much into the vue-router code. But it looks to me as if the only change needed is this file:
https://github.com/vuejs/vue-router/blob/dev/src/util/scroll.js

Maybe we could add some conditions on line 126 to return the current implementation or translate the old object:

{ x, y } to

{ top: x, left: y, behaviour: x }

Sorry if markup sucks, I'll do some more work if this gets atention

[posva]

That's already possible with selector: https://router.vuejs.org/en/advanced/scroll-behavior.html

[BorjaRafols]

That has nothing to do with what I'm saying.

Giving a selector will scroll to the desired DOMElement but doesn't apply any scrollBehaviour. Sorry if I didn't explain myself.

In this file: https://github.com/vuejs/vue-router/blob/dev/src/util/scroll.js

I'd like to change line 126 from

if (position) {
    window.scrollTo(position.x, position.y)
  }

to something like

if (position) {
    window.scrollTo({
      top:positon.x
      left: position.y,
     behavior: 'smooth'
  })
}

Obviously this would need to be parametrized.

This would apply a smooth scrolling in modern browser and apply a normal scroll like right now in older ones.

If you add the polyfill I said before then it smootly scrolls on every device.

[posva]

Aaah, sorry, didn't understand it correctly.
In that case let's wait a bit until the thing becomes a standard so we can base ourselves on something that all browsers are going to follow 🙂

[BorjaRafols]

Let me add this links I found. It's actually a CSS Property specification:

Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/cssomviewsmoothscrollapi/
Chrome: https://www.chromestatus.com/feature/5812155903377408
CSSOM: https://drafts.csswg.org/cssom-view/#smooth-scrolling

[posva]

In the future I think it will be safe to pass any extra parameter to the scrollTo function while still using scrollTo(x, y) in older browsers, so this may work out of the box. I'll still have to figure out how to detect what syntax is supported by browsers

[BorjaRafols]

Just looked at the source code of the polyfill I mentioned.

He uses this function, because as I said, this scrollBehaviour is actually a CSS prop.

https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js

if ('scrollBehavior' in document.documentElement.style)

Should be feasable, I'll check this once I get home and can use IE7 :D

[posva]

the last browser supported is ie9 lol

[BorjaRafols]

This starts to look good, could you maybe reopen this issue?

IE9 -> scrollBehavior' in document.documentElement.style -> false;

But that doesn't really matter as scroll() is not available on IE9 anyway.

I'd love to help implement this one, but so far i've never commited anything to a public repo.

[posva]

Ok, as long as the overhead is small enough to be worth adding 😉

[henryoliver]

Hey guys, follow the solution for any decent browser:

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', name: 'home', component: Home },
        { path: '*', component: ClientError }
    ],
    scrollBehavior(to) {
        if (to.hash) {
            return window.scrollTo({ top: document.querySelector(to.hash).offsetTop, behavior: 'smooth' });
        }
        return window.scrollTo({ top: 0, behavior: 'smooth' });
    }
});