New CSS design spec to talk about. I have to admit that I was unaware of scroll-snap’s existence. Definitely something I’d like to experiment with. Anyone else played with it and have a project to share?
Here’s a snippet from the article I read followed by links to the article and codepen.
Multiple specs
Scroll snap was originally specified back in 2015. At that point it was implemented in Safari and Firefox. Edge and IE also partially support this spec (with the
-msprefix), but Chrome never implemented it at all. In 2018, the spec was heavily revised, including changes that are not compatible with the 2015 spec. A lot of posts online refer to this old spec, and even MDN is yet to be updated with the 2018 spec. In this post I will be focusing on the new spec.It is important to note that as of writing this, the 2018 spec is not fully finalised, and some small details may change (especially
scroll-snap-stop, discussed later).Current Browser Support
Chrome 69 and Safari 11 both support the new spec. It’s currently unclear when the other browsers will update to the newer spec, so for the widest support, you need to write code for both specs. For simple cases this is not difficult, but for more advanced features, this can be a pain.
As always, CanIUse has a great support table for scroll snap, including which version of the spec each browser supports.
