Discussion on: CSS Smooth Scrolling

[Jonas]

Oh, Safari, you're right!
I think you convinced me, I'll go with --scroll-behavior as default and only offer the font-family detection as option to support legacy browsers like IE 🤞🏻

...and I don't think running getComputedStyle(el).fontFamily when an anchor with a local href is clicked is so bad for performance that it justifies dropping IE support, do you? Or do you mean the performance impact of polyfilling smooth scroll in general?

[Rik Schennink]

Awesome.

I haven’t tested it but the scroll behavior itself might be too much.

getComputedStyle returns a live object so you’ll only have to request it once, but even if you requested it multiple times I don’t think it would be problematic.

[Jonas]

I'm using it on the documentation site and it works smoothly, even on IE9 with requestAnimationFrame substituted as setTimeout(fn, 0) 😅
Also used it just fine on a production site that's very heavy on smooth scrolling (while at the same time running a position: sticky polyfill runtime), so I'm not too concerned about performance. :)

And didn't know getComputedStyle returns a live binding, thanks for the info! Will take this into account next time I update the package 👍🏻

So, current strategy:

• Have custom property --scroll-behavior as default/recommended way of adjusting the behavior
• Keep supporting fontFamily and inline styles for legacy support/convenience
• Do you think it's worth it having the custom property that's used be configurable, so users can use some other property instead of --scroll-behavior if they want?

To go with these changes, the PostCSS Plugin shall compile scroll-behavior: smooth to:

scroll-behavior: smooth;
--scroll-behavior: smooth;

and if browserslist includes browsers without support for custom properties, compile to:

scroll-behavior: smooth;
--scroll-behavior: smooth;
font-family: 'scroll-behavior: smooth', /* user defined fonts */;

(while accepting { customProperty: boolean, fontFamily: boolean } config so users can overwrite this behavior)

Do you have any feedback on this?
(sorry to bother you but your input was very valuable so far 🙂)

[Rik Schennink]

Looks good to me! Love the very structured approach. 👏

• Careful with wanting to support everything. Could increase library size, might introduce weird bugs (certainly on very old browsers) sometimes a simple mustard cut is a lot better for everyone.