Scroll spy 🕵🏼‍♀️ med CSS

Hanna Olsson,

Intro

Efter Nordic.js och Una Kravets genomgång av CSS-nyheter blev jag sugen på att testa en av dem, den nya scroll-target-group propertyn.

Så här kommer ett blogginlägg för att dema just hur en sån fungerar 👌🏼

Property

Vad innebär då propertyn scroll-target-group ? Jo scroll-target-group tillsammans med a:target-current specifierar hurvida ett element är i en skroll-marker-grupp-container och markerar/indikerar den - utan någon JavaScript:

 1/* Scroll sticky spy navbar */
 2 
 3.blogpost-nav-container {
 4  margin: 0 auto;
 5}
 6 
 7.blogpost-nav {
 8  scroll-target-group: auto;
 9  background-color: #f4eafd;
10  padding: 0.6rem;
11  border-radius: 4rem;
12  list-style-type: none;
13  box-shadow: 0 2.8px 2.2px rgba(147, 51, 235, 0.034);
14  width: auto;
15  bottom: 0;
16 
17  li {
18    padding-left: 0.8em;
19    padding-right: 0.8em;
20  }
21 
22  a {
23    color: black;
24    transition: color 0.25s ease;
25    display: block;
26    text-decoration: none;
27  }
28  a:target-current {
29    color: #000000;
30    font-weight: 800;
31    @apply dark:text-white;
32  }
33}
 1/* Scroll sticky spy navbar */
 2 
 3.blogpost-nav-container {
 4  margin: 0 auto;
 5}
 6 
 7.blogpost-nav {
 8  scroll-target-group: auto;
 9  background-color: #f4eafd;
10  padding: 0.6rem;
11  border-radius: 4rem;
12  list-style-type: none;
13  box-shadow: 0 2.8px 2.2px rgba(147, 51, 235, 0.034);
14  width: auto;
15  bottom: 0;
16 
17  li {
18    padding-left: 0.8em;
19    padding-right: 0.8em;
20  }
21 
22  a {
23    color: black;
24    transition: color 0.25s ease;
25    display: block;
26    text-decoration: none;
27  }
28  a:target-current {
29    color: #000000;
30    font-weight: 800;
31    @apply dark:text-white;
32  }
33}

Anchor

Med klassiska ankalänkar kan jag sedan koppla ihop CSS:en ovan med min lista så här:

1<div class="blogpost-nav-container flex justify-center">
2  <ul class="blogpost-nav inline-flex fixed bottom-0 bg-[#f4e7ff] dark:bg-[#4e0381]">
3    <li><small class="text-purple-800  dark:text-[#b288d3]"> Scroll 🕵🏼‍♀️ </small></li>
4    <li><a href="#one">Intro</a></li>
5    <li><a href="#two">Prop</a></li>
6    <li><a href="#three">Anchor</a></li>
7    <li><a href="#four">Browser</a></li>
8  </ul>
9</div>
1<div class="blogpost-nav-container flex justify-center">
2  <ul class="blogpost-nav inline-flex fixed bottom-0 bg-[#f4e7ff] dark:bg-[#4e0381]">
3    <li><small class="text-purple-800  dark:text-[#b288d3]"> Scroll 🕵🏼‍♀️ </small></li>
4    <li><a href="#one">Intro</a></li>
5    <li><a href="#two">Prop</a></li>
6    <li><a href="#three">Anchor</a></li>
7    <li><a href="#four">Browser</a></li>
8  </ul>
9</div>

En liten bonus här var dessutom att jag fick lista ut hur man definierar ankarlänkar i markdown (då bloggen är skriven i markdown) så här 👇🏼 🤓

1### Intro {#one}
2### Property {#two}
3### Anchor {#three}
4### Browser {#four}
1### Intro {#one}
2### Property {#two}
3### Anchor {#three}
4### Browser {#four}

Browser

Just nu är det enbart Chrome & Edge som stödjer Scroll-target-group enligt MDN så vi får hoppas att Safari och andra webbläsare implementerar detta också 🤞🏼.

För även om det hade varit relativt enkelt att skriva denna funktion med JS, tänk då hur en scroll-target-group hade kunnat underlätta kodskrivandet av t.ex. en carousel med enbart CSS? 🤯