技術標籤：css

一、滾動錨定是什麼？

大家可能有過這樣的瀏覽體驗，就是圖片很多的時候，例如漫畫網站，尤其是條漫，在手機端，垂直佈局這種，如果上方的圖片載入慢，那麼下方的圖片看著看著就會被推下來，然後自己又要重新去滾動定位。

這是一個不太友好的瀏覽器體驗行為。

於是，Chrome 56（2017年）和Firefox 66（2019年）開始最瀏覽器原來的這些滾動行為進行了優化，實現了一種“滾動錨定”的互動行為。

具體描述為：當前視區上面的內容突然出現的時候，瀏覽器自動改變滾動高度，讓視區視窗區域內容固定，就像滾動效果被錨定一樣。

因此，在PC端，在Chrome瀏覽器下和Firefox瀏覽器下，當你閱讀文章或者看條漫的時候，是感覺不到頁面跳動的，就是滾動錨定在其作用。

二、overflow-anchor屬性出現的背景

但是，瀏覽器自認為正確的事情對於使用者而言並一定是想要的。

例如點選下方的一個按鈕，會在上方append一些資料，此時，使用者希望的是append的資料內容吧下方的按鈕推開，優先展示內容，此時，滾動錨定反而拖了後腿，禁止滾動錨定反而是更好的做法。

如何禁止呢？

就是使用CSSoverflow-anchor屬性。

語法

CSSoverflow-anchor屬性語法比較簡單：

overflow-anchor: auto | none

其中overflow-anchor:auto是初始宣告，表示瀏覽器自己決定滾動錨定的行為，通常表現為執行滾動錨定；overflow-anchor:none

案例

這個案例是實時效果，大家可以直接滾動操作，左邊是預設的overflow-anchor:auto，右邊設定的是overflow-anchor:none。

//zxx:如果看不到效果，多盜版文章，請前往原文https://www.zhangxinxu.com/wordpress/?p=9544進行體驗。

可以看到，左側的內容滾動後，append了很多div，但是視窗內容紋絲不動，就滾動條的位置變了下；而右側的內容滾動後，append的內容出現在了視野，滾動條位置保持不變。

這就是overflow-anchor屬性的應用場景示意。

三、結語而已

http://aspedrom.com/4pdU

通常滾動錨定行為是我們需要的，而overflow-anchor屬性的預設值就表現為滾動錨定，因此，overflow-anchor屬性平常需要使用的場景比較少，還是那句話，類似overflow-anchor這樣的屬性，平時覺得沒什麼，但是一旦遇到合適的場景，那用起來的感覺就是爽歪歪了，這個世界，沒有沒有用的CSS，只有你不知道的或者不會用的CSS。

最後，overflow-anchor屬性Safari瀏覽器並不支援，因為，iPhone瀏覽器下，上面案例兩個滾動效果是一樣的。

相容性如下圖所示。

以上就是本文內容，感謝閱讀，歡迎分享！