Updated Scroll Markers in the Table of Contents
- Published on:
- Categories:
- CSS 55, IndieWebCamp 3, Update 4
- Current music:
- Haru Nemuri — Shunka Ryougen - Audiotree Live Version
- Current drink:
- Peppermint Tea
Quick Update
I’ve spent most of the day inside the delayed and cancelled trains (thanks, Deutsche Bahn). I did not have an opportunity to come up with a good post for today, but both yesterday (and a bit today) I hacked on this blog, as a part of the IndieWebCamp.
I did the thing I wanted to do during this weekend: update my blog’s Table of Contents to be similar to what I have on my main site. Actually, it was already working like that, but only in Chrome.
What I Had
What I am talking about: the small finger marker that appears in the Table of Contents, pointing to the current section:
Before this update, it worked only in Chrome: I was using a heavily modified variation of my scroll-driven animations experiment for scroll markers.
The Update
Now — it is all the same, but also works in Firefox and Safari!
All thanks to some JS, delivered via a custom element. This is something I briefly mentioned in my CSS Day talk: instead of trying to cover the whole technology, like scroll-driven animations, with a polyfill, we can only ponyfill a single technique with a custom element and implement only the missing parts.
This is what I did: the technique requires scroll-driven animations, particularly, timeline-scope, which Firefox Nightly does not yet support in its outdated experimental implementation of them.
I used an intersection observer and a window resize event to implement what is missing, while keeping most of the styles intact.
I won’t go into the details of the implementation today. Maybe the code behind it could be polished and published as a package? Maybe, one day. Maybe, not. Let me know.
If you’re interested at peeking at the source code of this (far from polished, but at least with some comments), here it is:
The Specs
Interestingly, Robert Flack opened a CSSWG issue about scroll-markers as a part of the work they did alongside Miriam Suzanne and Nicole Sullivan on the “carousels” — “CSS Overflow - Broad Research”.
With it, things like that will become trivial, and I cannot wait for it to be specified and in the browsers.