support `scroll-behavior: smooth` css property about smoothscroll

[Grawl]

I have a better idea: polyfill all links with href starting with #

import smoothscroll from 'smoothscroll-polyfill'
if (CSS.supports('scroll-behavior', 'smooth')) return
smoothscroll.polyfill()
const links = document.querySelectorAll('a[href^="#"]')
links.forEach(link => {
	const id = link.attributes['href'].value.slice(1)
	const target = document.getElementById(id)
	link.addEventListener('click', () => {
		target.scrollIntoView({ behavior: 'smooth' })
	})
})

[jonaskuske]

For those still stumbling across this issue:
If you just want the scroll-behavior CSS support to make anchor links pointing at an ID scroll smoothly (as is common for one pager designs), I made a package to help with this some time ago, which can be used in combination with this polyfill. :)
https://github.com/jonaskuske/smoothscroll-anchor-polyfill

It won't automatically add smooth scrolling when using the JS APIs, so you still need to pass { behavior: 'smooth' } when doing that, but all <a href="#id"> anchors on the page will scroll smoothly. (and navigation between anchors using the browser's backwards/forwards buttons too)

[madeleineostoja]

+1 this would be awesome.

[ckrack]

This would be great.
You can base this on: https://github.com/philipwalton/polyfill

[ffuubarbuzz]

+1

[jgagne]

+1

[jeremenichelli]

I think this makes more sense as a PostCSS plugin more as a JavaScript polyfill. Let me know if you agree with me @iamdustan and we close this.

[iamdustan]

I don’t think this makes sense as a PostCSS plugin. Specifically, PostCSS only handles transforming CSS source to CSS source, but until Houdini starts landing there is nothing that can be done on that front.

I think the only practical way to support this is by:

• require the style to by declared inline <div style="scroll: smooth" />
• test for that existence when any scroll method is called.
• take smooth or standard path accordingly.

The reason for requiring it inline is because without it we’d have to capture and parse every CSS file and declaration used on a given webpage to behave correctly (since getComputedStyle(element) doesn’t include unknown declarations). Whilst that is more correct it also is a large cost to the user just to detect whether the developer wanted to use smooth scrolling.

[jeremenichelli]

I was thinking on Houdini being an immediate need for this to actually work too. I think the inline style thing can be easily done, though I don't know if worth since inline is not the way devs prefer to style elements in the major of cases.

[ffuubarbuzz]

On using inline style: https://github.com/philipwalton/polyfill is designed to handle css parsing for polyfills.

[iamdustan]

even though that library would make it rather trivial from our perspective, it still has the cost of doing it. I don’t personally think that that is a really good default behavior.

[iamdustan]

fwiw this isn’t a novel idea either. the pointer-events polyfill takes a similar stance for performance reasons. https://github.com/jquery/PEP#touch-action

[stevenvachon]

How about partially shimming this with a different function: polyfillAll()

This function would run the normal polyfill(), but add "click" or "hashchange" event listeners for smooth-scrolling all links to on-page anchors.

[XeeshanAnsari]

Any update on this?

[jeremenichelli]

I've investigated and there's no way we can detect the scroll-behavior: smooth property on CSS, since the browser doesn't parse properties it unknows and honestly I don't see a big gain in adding support for inline style attribute detection.

If someone has an idea on how to properly do this (no hack) please stand up :)