Take scroll margin of element into account

[JoostKersjes]

What problem is this solving

When the scrollBehavior gets passed an el element, it scrolls precisely to the element.

If the page has e.g. a position: sticky banner, the element will partially be hidden behind this banner. The simple solution for a non-JS webpage in this case would be to add a scroll-margin: 60px; CSS rule to the element in question. Right now vue-router doesn't support this solution.

I couldn't find an existing issue for this suggestion, but I did find a mention of other people with the same problem including a workaround: gridsome/gridsome#1361 (comment)

Proposed solution

In my opinion, the scrollBehavior should automatically check if the target element has a scroll-margin and use it to offset the scroll position destination.

This allows a stylesheet to be responsible for defining the scroll margin, making it easy to have different offset values depending on the styling of the element and/or the layout of the page.

Adding this to the library would call for a bit of documentation to point searches for a solution in the right direction.

Describe alternatives you've considered

• Keep it undocumented and unsupported. There might not be many apps that have to deal with this, and there is a pretty simple workaround out there.
• Add some documentation that mentions this potentially unexpected behaviour, ideally including a code snippet as a suggestion to solve it.

[JoostKersjes]

Would you be open to a PR for this? I might be able find time to create one.

[posva]

I would be open to a pool request for the documentation on this: this is one of many edge cases in CSS about scrolling restoration and I believe it’s safer to document some of these To let users know that they have to compute any offsets by themselves

[JoostKersjes]

I've created one: #2448