by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11837
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、又一个JS交互被干掉了

本文要介绍的 CSS scroll-target-group属性以及:target-current伪类，可以实现滚动的时候，基于位置不同，对应的菜单项自动高亮的效果。

关于这种效果的实现，我之前还专门写文章介绍过：“尝试使用JS IntersectionObserver让标题和导航联动”。

没想到，短短几年之后，纯CSS就能实现这样的效果了。

眼见为实，滚动下面内嵌的局部滚动条（需要Chrome 140+），大家就可以看到对应的效果了。

或者参见下图所示的GIF效果。

是不是很赞？

二、如何实现导航菜单匹配？

实现代码非常简单，HTML代码就下面这些：

<menu>
    <li><a href="#intro">前言</a></li>
    <li><a href="#ch1">第1章</a></li>
    <li><a href="#ch2">第2章</a></li>
</menu>

<article>
    <h1>欢迎来到我的博客</h1>
    <section id="intro">...</section>
    <section id="ch1">...</section>
    <section id="ch2">...</section>
</article>

CSS代码也非常简单，就这么点内容：

menu {
    position: fixed;
    scroll-target-group: auto;
}

a:target-current {
    color: red;
}

结束了，就结束了，对吧，给菜单容器设置scroll-target-group:auto，然后菜单里面的链接元素使用:target-current设置匹配样式就可以了。

此时，链接元素对应的href锚点元素进入区域的时候，链接元素就会高亮啦！

牛逼！

三、关于scroll-target-group属性

下面快速介绍下scroll-target-group属性。

该属性可以让锚点元素有类似于::scroll-marker伪元素的特性（ CSS Carousel API中的一个特性），关于::scroll-marker伪元素，可以参见我前几个月刚写的文章：“CSS ::scroll-button ::scroll-marker伪元素又是干嘛用的”。

需要使用的时候，直接设置值为auto就可以了。

兼容性

非常新的一个特性，MDN连文档都没有，Chrome 140浏览器支持。

四、关于:target-current伪类

:target-current伪类相对支持早一些，和::scroll-marker伪元素等特性同一时间支持的，基于滚动位置匹配scroll-marker-group或者scroll-target-group里面的锚点或标记元素。

使用示意：

::scroll-marker {
  background-color: white;
}

::scroll-marker:target-current {
  background-color: black;
}

兼容性

Chrome 135+浏览器支持。

五、结语说明

很好很强，静待浏览器全面支持。

我发现CSS的野心挺大的，看架势，要覆盖几乎Web上常见的交互，JS退让为逻辑处理。

不过一来学习成本高，二来以后有AI，三来有成熟替代方案，未来会有几个人使用呢？我看悬。

所以前端没啥搞头了，不如来钓鱼吧，欢迎大家关注我的钓鱼账号：“最会钓鱼的程序员”。

周周更新！

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11837

（本篇完）