Support scroll-margin

[macakronos]

I can think of it to be with a css variable.

Currently scroll-margin. It doesn't work in Safari, so to solve that need I came up with that option. Thank you for your contribution to the community.

[jonaskuske]

Same situation as #34 (comment) :)
(though I must say I'll look into scroll-padding first as I think it's more common, mostly for fixed headers)

[jonaskuske]

Good news, found out that scroll-margin support is implemented by https://github.com/magic-akari/seamless-scroll-polyfill, a more modern (and larger) fork of https://github.com/iamdustan/smoothscroll.

So if you use that in tandem with smoothscroll-anchor-polyfill, scroll-margin is supported. For example:

<script src="https://unpkg.com/[email protected]/lib/bundle.min.cjs"></script>
<script src="https://unpkg.com/[email protected]/dist/index.min.js"></script>
<script>
// enable seamless-scroll-polyfill
seamless.polyfill()
</script>

Note that in Safari < 14.5 scroll-margin is called scroll-snap-margin, so if you support older Safari versions you'll need to add that property as well.

[macakronos]

Excellent. Thanks jonaskuske.