題幹與適用情境
頁面有一組指向文章章節或輪播項目的連結，希望捲動時突出目前目標。CSS scroll-target-group 可以把既有導覽容器宣告為捲動標記組，讓連結目標與目前可見內容建立關係。題目要求你說明它與腳本 IntersectionObserver、傳統錨點和 scroll-marker-group 的邊界，並設計漸進增強。
面試官考察點
面試官會觀察你是否先保留可用的真實連結，再考慮 CSS 負責的視覺與狀態表達。強回答會區分捲動位置、焦點位置與目前項目樣式，處理重複目標、動態內容、橫向捲動與減少動效偏好，並說明實驗性屬性不可用時的回退。只展示一個 CSS 宣告，無法證明導覽可操作。
回答前需要釐清的問題
導覽目標是什麼
確認每個連結是否指向穩定的章節 ID、輪播卡片或虛擬列表項目。目標必須能被瀏覽器解析，也不會因重新排序而改變語意。
目前項目如何定義
明確是進入視口、達到閾值、取得焦點，還是使用者最後點擊的項目。捲動狀態與焦點狀態可能不同，不能用一個顏色規則假設兩者相同。
支援範圍與替代方案
列出目標瀏覽器、螢幕閱讀器和鍵盤需求。scroll-target-group 屬於實驗性能力，傳統連結和必要的腳本觀察仍要可獨立工作。
30 秒回答架構
「我先用語意化導覽和穩定錨點保證基本跳轉，再把導覽容器宣告為 scroll-target-group，讓目標進入視口時可以套用目前項目樣式。捲動標記不負責焦點管理，我會單獨測試 Tab、跳轉後的焦點和返回路徑；動態內容則在目標建立後重新驗證。對不支援此屬性的瀏覽器，我保留普通連結和必要的 IntersectionObserver 邏輯，並用鍵盤、螢幕閱讀器、橫向捲動和減少動效設定做端到端測試。」
分步深入解答
第一步：建立穩定錨點
為每個章節或項目產生唯一、可預測的 ID，導覽連結使用真實片段目標。避免只依賴陣列索引，因為篩選、分頁和伺服器渲染會改變索引。
第二步：宣告捲動標記組
在支援的瀏覽器中，將目錄或輪播控制容器設定為 scroll-target-group: auto。這一步讓容器中的片段連結可以參與捲動標記關係，但不會自動替你設計焦點或語意。
第三步：區分目前樣式與焦點樣式
使用目前目標偽類或等效狀態表現捲動位置，使用 :focus-visible 表現鍵盤焦點。兩者同時存在時，應確保對比度、動畫與文字標籤都清楚。
第四步：處理動態與多容器情境
章節載入、輪播循環或巢狀捲動容器變化後，重新檢查目標是否唯一、目前項目是否穩定。避免同一連結被多個捲動容器解讀，必要時拆分導覽組。
第五步：設計回退與驗證
不支援屬性時，普通錨點必須仍能跳轉；若需要目前項目指示，可用 IntersectionObserver 作為增強。測試鍵盤、螢幕閱讀器、瀏覽器返回、縮放、橫向捲動與 prefers-reduced-motion。
高品質示範回答
我會先為文章章節產生穩定 ID，使用真實的目錄連結，確保沒有 CSS 時也能跳轉。若目標瀏覽器支援，我會在目錄容器上設定 scroll-target-group: auto，用目前目標狀態突出正在閱讀的章節，同時用 :focus-visible 保持鍵盤焦點可見。捲動標記不負責把焦點強行移到內容，因此跳轉後我會驗證焦點策略和返回路徑。對於無限載入或輪播，我會在新增目標後檢查 ID 唯一性與目前項目穩定性。不支援此屬性時保留錨點，並用觀察器補充狀態；最後在桌面、行動裝置、螢幕閱讀器和減少動效設定下完成任務測試。
常見錯誤
- 錯誤表現： 只有 CSS 狀態，沒有真實錨點連結。→ 失敗原因： 不支援瀏覽器和輔助技術失去導覽路徑。→ 修正方法： 先建立可獨立工作的語意連結。
- 錯誤表現： 把目前可見項等同於鍵盤焦點。→ 失敗原因： 使用者可能聚焦目錄但未捲動內容，兩個狀態會衝突。→ 修正方法： 分別設計目前狀態與
:focus-visible。 - 錯誤表現： 用陣列索引產生目標 ID。→ 失敗原因： 篩選和循環載入後會出現重複或漂移。→ 修正方法： 使用穩定業務識別，並在更新後檢查唯一性。
- 錯誤表現： 直接依賴實驗性屬性上線。→ 失敗原因： 支援矩陣與捲動容器行為不一致。→ 修正方法： 保留普通錨點，按能力增強並監控任務完成率。
追問及應對
追問一：為什麼不用 IntersectionObserver？
Observer 適合在需要相容既有瀏覽器或有複雜業務閾值時提供狀態邏輯；scroll-target-group 可以減少這類狀態程式碼。兩者可分層使用，先保證連結與焦點，再比較維護成本。
追問二：橫向輪播和縱向目錄能共用一個組嗎？
通常不應共用。它們的捲動軸、目標可見性與鍵盤模型不同，混在一個組裡會讓目前項目含義不清。應按捲動容器拆組，並提供獨立標籤。
追問三：目前章節切換時要自動移動焦點嗎？
不應因被動捲動就強行移動焦點，這會打斷鍵盤使用者。只有使用者主動啟用目錄連結時，才按元件約定把焦點留在連結或移動到目標標題，並讓螢幕閱讀器得到明確回饋。
追問四：如何處理減少動效偏好？
減少或取消平滑捲動與標記過渡，保留清楚的目前狀態與焦點指示。功能導覽不能依賴動畫才能被理解。