Updated Scroll Markers in the Table of Contents

Published on:: November 10, 2024
Categories:: CSS⁶¹, IndieWebCamp³, Update⁴
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:

The list marker is replaced with a pointing hand symbol for a ToC item when its section is on the screen.

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.