CSS 屬性 scroll-initial-target 提供宣告式、僅限 CSS 的方式，可在捲動容器算繪後，立即將特定子系元素帶入捲動容器的可見區域。過去，開發人員必須仰賴 JavaScript (Element.scrollIntoView()) 或網址片段 ID (#item-id)，但這兩種方法都有其限制，且實作難度較高。
導入方式
如要成功導入，請按照下列步驟操作：
- 確保有捲動容器：目標元素必須位於捲動容器內 (具有溢位且允許捲動的元素，例如
overflow: auto)。這可以是任何祖系元素，包括根<html>元素。 - 指定項目：將
scroll-initial-target: nearest套用至要顯示的特定子系元素。
程式碼範例：直向媒體動態饋給
在這個範例中，動態饋給會先捲動至特定的「精選」項目，而不是清單的最頂端。
/**
* TARGET: The item that should be visible on initial load.
*/
.item.target {
scroll-initial-target: nearest;
}
策略執行與最佳做法
- 務必使用
scroll-initial-target處理「從中間開始」的體驗，例如從當天開始的日曆，或從特定圖片開始的圖片庫。 - 請勿與無障礙功能焦點混淆。這項屬性只會移動「視覺」可視區域，不會移動鍵盤焦點。如果目標是鍵盤使用者的起點，您必須手動管理
element.focus()。 - 如果需要在載入時顯示流暢的「捲動」動畫，請不要使用這個屬性。這個屬性是離散的，會在版面配置階段立即設定位置。
- 請勿在同一個可捲動容器內的多個元素上設定
scroll-initial-target。如果有多個元素指定scroll-initial-target: nearest，瀏覽器會選取 DOM 樹狀結構順序中第一個出現的元素。 - 務必提供媒體尺寸。由於捲動位置是在初始版面配置期間計算，因此請確保圖片或影片具有
aspect-ratio或固定的height/width，以免目標在媒體載入後移動。 - 務必考量優先順序階層：網址片段 (例如
example.com/#top) 和容器層級的scroll-start屬性，優先順序都高於scroll-initial-target。
備用策略
如果瀏覽器不支援 API，請使用 JavaScript 備用方案。使用 DOMContentLoaded 事件，確保瀏覽器在 HTML 剖析完成後，立即將元素捲動至檢視畫面，提供比等待所有圖片和資源載入更快速的體驗。或者，您也可以將指令碼放在 <body> 元素的結尾，這樣就不需要事件監聽器。
/**
* Progressive Enhancement Fallback
*/
document.addEventListener("DOMContentLoaded", () => {
// Check for native CSS support
if (!CSS.supports("scroll-initial-target", "nearest")) {
const feedTarget = document.querySelector(".item.target");
if (feedTarget) {
// 'block: center' ensures the featured media is centered in view
feedTarget.scrollIntoView({ behavior: "instant", block: "center" });
}
}
});