使用 CSS :target-current 打造純 CSS 滾動監聽目錄 (Scroll Spy)

在開發部落格或技術文件網站時，「文章目錄 (Table of Contents)」是提升閱讀體驗的關鍵。當使用者向下滾動文章時，側邊欄的目錄標題會自動亮起對應的章節——這通常被稱為 Scroll Spy (滾動監聽)。

但長久以來，開發者通常都使用JavaScript 來實作文章目錄。就算你現在去問 AI，它大概率也是使用 IntersectionObserver 給你，叫你去監聽每一個 DOM 元素的位置。

為了一個單純的 UI 狀態去綁一堆 Observer，。現在CSS 實驗性語法 :target-current 已經可以單純用CSS 處理了。

:target-current 怎麼使用？

這是 W3C 為了優化滾動體驗端出的新草案。實作起來非常簡單，只要使用兩個屬性：

scroll-target-group：這是容器屬性。把它掛在目錄外層，等於直接告訴瀏覽器：「這裡面的連結要跟著頁面滾動連動」。

:target-current：全新的偽類（Pseudo-class）。畫面滾到哪個區塊，目錄裡對應 Hash 的連結就會自動掛上這個狀態。

拿我的個人部落格專案舉例。右邊那個 Fixed 側邊欄目錄，在使用了:target-current 後實作只剩這樣：

TSX

<nav className="toc-nav">
  {headings.map((heading) => (
    <a
      key={heading.id}
      href={`#${heading.id}`}
      className="toc-link"
    >
      {heading.text}
    </a>
  ))}
</nav>

CSS

.toc-nav {
  scroll-target-group: auto;
}

.toc-nav a:target-current {
  @apply text-teal-700 bg-teal-100 border-l-2 border-teal-600;
}

結語

透過 scroll-target-group 與 :target-current 的實驗性實作，獲得了很大的好處：

徹底零負擔的監聽：丟棄了龐大耗能的 IntersectionObserver。效能頂尖的滾動感知：由瀏覽器底層 (Main/Compositor thread) 原生處理滾動計算，不管滑動再快也絕不掉幀。溫馨提醒：截至撰文當下，這項語法仍處於 MDN 上的 Experimental (實驗性質) 階段。雖然它在支援最新實驗旗標的主流瀏覽器中能大放異彩，但在它正式成為 Baseline（跨瀏覽器基本配置）之前，在正式商業專案中可能還需要評估。

:target-current 怎麼使用？

結語

相關標籤