css tip 📍 - the same :𝚝𝚊𝚛𝚐𝚎𝚝-𝚌𝚞𝚛𝚛𝚎𝚗𝚝 gives you a scrollspy with no js.
.𝚝𝚘𝚌 {
𝚜𝚌𝚛𝚘𝚕𝚕-𝚝𝚊𝚛𝚐𝚎𝚝-𝚐𝚛𝚘𝚞𝚙: 𝚊𝚞𝚝𝚘;
}
.𝚝𝚘𝚌 𝚊:𝚝𝚊𝚛𝚐𝚎𝚝-𝚌𝚞𝚛𝚛𝚎𝚗𝚝 {
𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚋𝚕𝚊𝚌𝚔;
𝚌𝚘𝚕𝚘𝚛: 𝚠𝚑𝚒𝚝𝚎;
}
each <𝚊 𝚑𝚛𝚎𝚏="
#𝚒𝚍"> in .𝚝𝚘𝚌 tracks its section. the link for the section in view matches :𝚝𝚊𝚛𝚐𝚎𝚝-𝚌𝚞𝚛𝚛𝚎𝚗𝚝 and follows as you scroll.
css tip 🪟 - carousel tabs with no js.
one line turns a scroll-snap carousel into a real tab list:
.𝚌𝚊𝚛𝚘𝚞𝚜𝚎𝚕 {
𝚜𝚌𝚛𝚘𝚕𝚕-𝚖𝚊𝚛𝚔𝚎𝚛-𝚐𝚛𝚘𝚞𝚙: 𝚋𝚎𝚏𝚘𝚛𝚎 𝚝𝚊𝚋𝚜;
}
.𝚌𝚊𝚛𝚘𝚞𝚜𝚎𝚕::𝚜𝚌𝚛𝚘𝚕𝚕-𝚖𝚊𝚛𝚔𝚎𝚛-𝚐𝚛𝚘𝚞𝚙 {
𝚍𝚒𝚜𝚙𝚕𝚊𝚢: 𝚏𝚕𝚎𝚡; 𝚐𝚊𝚙: 𝟾𝚙𝚡; 𝚑𝚎𝚒𝚐𝚑𝚝: 𝟺𝟾𝚙𝚡;
}
.𝚌𝚊𝚛𝚘𝚞𝚜𝚎𝚕 > 𝚕𝚒::𝚜𝚌𝚛𝚘𝚕𝚕-𝚖𝚊𝚛𝚔𝚎𝚛 {
𝚌𝚘𝚗𝚝𝚎𝚗𝚝: 𝚊𝚝𝚝𝚛(𝚍𝚊𝚝𝚊-𝚝𝚊𝚋);
}
.𝚌𝚊𝚛𝚘𝚞𝚜𝚎𝚕 > 𝚕𝚒::𝚜𝚌𝚛𝚘𝚕𝚕-𝚖𝚊𝚛𝚔𝚎𝚛:𝚝𝚊𝚛𝚐𝚎𝚝-𝚌𝚞𝚛𝚛𝚎𝚗𝚝 {
𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚋𝚕𝚊𝚌𝚔; 𝚌𝚘𝚕𝚘𝚛: 𝚠𝚑𝚒𝚝𝚎;
}