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.