CSS-only scrollspy effect using scroll-marker-group and :target-current
September 9, 2025
The CSS Overflow Module Level 5 introduced a new CSS property which enriches HTML anchor elements with the capabilities of CSS scroll markers, allowing you to recreate the Bootstrap Scrollspy effect using a couple of lines of CSS only. In this post, we’re going to look into how to use this property, as well as discuss accessibility expectations to ensure the feature is accessible and inclusive.
Source: CSS-only scrollspy effect using scroll-marker-group and :target-current
More and more of the effects that once required sophisticated and complex JavaScript, frameworks, and libraries are now possible with just a little bit of CSS.
Here Sara Soueidan explores how to create the “scrollspy” effect using just a couple of lines of CSS.
Related Speakers
