search

jonaskuske / smoothscroll-anchor-polyfill

⚓ Apply smooth scroll to anchor links, polyfill scroll-behavior
https://jonaskuske.github.io/smoothscroll-anchor-polyfill
MIT License
42 stars 3 forks source link

Only run polyfill if CSS requires it #1

Closed jonaskuske closed 5 years ago

jonaskuske commented 6 years ago

This polyfill is meant to replicate scroll-behavior but right now it enables smooth scroll even if the respective scroll-behavior property is not set to smooth. Thus it is not automatically in sync with the CSS, if you load the polyfill but forget to set the actual CSS property, old browsers will get smooth scroll (powered by the polyfill) while browsers with native support will have instant, jumping scrolling – this is bad.

Since browsers don't parse CSS properties they don't know, we can't (efficiently) check whether scroll-behavior is actually set, so we need other ways to enable the polyfill:

Use inline styles:

<!-- Can be parsed from JS even if browser doesn't support it -->
<html style="scroll-behavior: scroll;">
...
<script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script>
<script> SmoothscrollAnchorPolyfill.polyfill(); </script>

Use font-family as a workaround, as custom font names can be easily parsed from JS:

<style>
  html {
    scroll-behavior: smooth;
    /* Specify as font-family so browsers without native support can see it  */
    font-family: 'scroll-behavior: smooth', sans-serif;
  }
</style>
<script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script>

The font-family workaround can be automated by a PostCSS plugin which detects the scroll-behavior property and adjusts the font-family accordingly. This way, developers using a build system can write normal CSS and not think about the polyfill, it just works ™️

This alone should not work any longer:

<script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script>