滾動錨定概述
作為一名網頁使用者，您可能熟悉滾動錨定所解決的問題。您在一個慢速連線上瀏覽一個很長的頁面，並開始滾動閱讀內容；當您忙於閱讀時，您正在檢視的頁面部分突然跳動。這是因為大圖片或其他一些元素剛載入到內容中更靠上的位置。
滾動錨定是一種瀏覽器功能，旨在解決內容跳動的問題，當用戶已經滾動到文件的新部分之後內容才載入時，就會發生這種問題。
它是如何工作的？
滾動錨定會調整滾動位置，以補償視口之外的更改。這意味著使用者正在檢視的文件中的點會保留在視口中，這可能意味著他們的滾動位置實際上會根據他們在文件中移動的“距離”而改變。
如何開啟滾動錨定？
您不需要！此功能在支援的瀏覽器中預設啟用。在大多數情況下，錨定滾動正是您想要的——內容跳動對任何人來說都是糟糕的體驗。
如果我需要除錯它怎麼辦？
如果您的頁面在啟用滾動錨定後行為不佳，可能是因為某些 scroll 事件監聽器沒有處理額外的滾動以補償錨定節點的移動。
您可以透過在 Firefox 的 about:config 中將 layout.css.scroll-anchoring.enabled 更改為 false 來檢查停用滾動錨定是否解決了問題。您還可以使用 layout.css.scroll-anchoring.highlight 開關檢查 Firefox 使用哪個節點作為錨點。這將在錨點節點頂部顯示一個紫色覆蓋層。
如果某個節點似乎不是一個合適的錨點，您可以使用 overflow-anchor 將其排除，如下所述。
如果我需要停用它怎麼辦？
CSS 滾動錨定模組提供了 overflow-anchor 屬性，可用於停用文件全部或部分的滾動錨定。它本質上是一種選擇退出此行為的方式。
唯一可能的值是 auto 或 none
auto是初始值；只要使用者的瀏覽器支援滾動錨定，此行為就會發生，並且他們應該會看到更少的內容跳動。none意味著您已明確選擇停用文件或文件部分的滾動錨定。
要停用整個文件的滾動錨定，您可以在 <body> 元素上設定它
body {
overflow-anchor: none;
}
要停用文件某一部分的滾動錨定，請在該部分的容器元素上設定 overflow-anchor: none
.container {
overflow-anchor: none;
}
如果停用文件或文件某一部分的滾動錨定，則停用區域的後代不能重新啟用。例如，如果您停用整個文件，則不能在後代節點上設定 overflow-anchor: auto 以重新開啟該子部分的滾動錨定。
抑制觸發器
存在一些“抑制觸發器”，它們會在可能出現問題的地方停用滾動錨定。如果錨點節點或其祖先節點上發生任何觸發器，則錨定將被抑制。
這些抑制觸發器是以下任何屬性的計算值的更改：
規範
| 規範 |
|---|
| CSS 滾動錨定模組級別 1 # 排除 API |
瀏覽器相容性
載入中…
要根據是否可以停用滾動錨定有條件地應用樣式，請使用 @supports 功能查詢來測試對 overflow-anchor 屬性的支援。
另見
- WICG 的原始滾動錨定直譯器 (2016)
- Chromium 的面向 Web 開發者的滾動錨定 (2017)