在平時開發中，經常會碰到需要快速定位的問題，比如常見的錨點定位。

<ul>
  <li><a href="#語法">語法</a></li>
  <li><a href="#示例">示例</a></li>
  ...
</ul>
<article>
 <h2 id="語法">語法</h2>
  <p>...</p>
  <h2 id="示例">示例</h2>
  <p>...</p>
  ...
</article>

這樣，在點擊a標簽時會自動定位到與之相對應的內容上，如下：

但是，這種通過錨點觸發的定位默認是緊貼滾動容器邊緣的，如果一些定位元素，比如fixed定位的頭部，就會出現被遮擋的情況，如下：

可以看到，“示例”這個標題由于緊貼頂部，導致被sticky定位的頭部遮住了。

那么，如何讓自動定位時讓目標元素預留出足夠大的間距呢？

一、一行 CSS解決

沒錯，看似有些麻煩的問題其實可以通過一行 CSS 解決，那就是 scroll-margin[3] ，下面是 MDN 的介紹。

scroll-margin 屬性的值代表用于將盒元素拖拽到顯示區域的拖拽滾動區域的起點。拖拽滾動區域由是由轉換后邊框大小的盒元素決定的，它會找到盒元素的矩形邊界（在滾動的容器的坐標空間軸上），并添加指定的起點。

這個描述很官方，有點不知道在說什么，導致很長一段時間都不知道這個屬性的真正用途。

在上面這個例子中，可以直接給目標設置scroll-margin。

h2{
  scroll-margin: 6rem; 
}

設置這個屬性后，當自動滾動定位到h2?時，會自動預留6rm?的間隔（可以防止被頭部遮擋），下面是演示（紅框表示6rem的間隔）

是不是非常簡單，最終效果如下：

其實，MDN官方已經采用了這種方式，經常看看 MDN，會發現有很多非常巧妙的實現，如下：

二、還有一個 scroll-padding

和scroll-margin比較類似的還有一個 scroll-padding[4]，功能都是一樣的，只是作用對象不一樣。

在前面的例子中可以看到，scroll-margin?是直接設置目前元素上的，scroll-padding不一樣，它需要設置在滾動容器上，比如：

html{
  scroll-padding: 6rem
}

這種方式也是可以達到相同的效果的。

一般情況下，兩種方式都可以自行選擇，如果很清楚滾動容器是哪個，可以直接選擇用scroll-padding?，否則就用scroll-margin。

三、其他滾動定位方式

除了錨點定位以外，還有其他一些方式可以觸發滾動定位。

1. scrollIntoView

有時候，我們需要將指定元素滾動到視線范圍之內，這時就需要用到這樣一個DOM方法：scrollIntoView[5]。

element.scrollIntoView();

這個定位和前面的錨點定位一樣，默認也是緊貼滾動容器的，如果設置了scroll-margin?或者scroll-pading，也可以實現在滾動定位時自動預留一定間距

2. focus 定位

在默認情況下，元素（比如a?鏈接）在focus?聚焦時都會自動滾動到視線范圍之內。和上面幾種情況一樣，如果有fixed?定位元素，有可能在focus時被遮擋的問題。

如果設置了scroll-margin?或者scroll-pading?，這樣就可以避免找不到焦點的情況，確保一直都能看到焦點，下面是通過tab鍵聚焦的情況：

3. scroll-snap

還有一種情況是滾動捕捉：scroll-snap-type[6]，這個屬性可以讓滾動時自動捕捉臨界點。正常情況下，滾動臨界點是緊貼滾動容器的，像這樣：

如果希望預留一定的距離如何處理呢？還是這個scroll-margin?，下面給第二個元素設置了一定的scroll-margin，效果如下：

可以看到，在滾動到第2個元素時，提前預留了一定的距離，而且還可以設置負值，這樣在滾動到第2個元素時，可以提前看到第3個的部分內容。

四、兼容性和總結

最后來看一下兼容性，一個體驗增強屬性，兼容性還不錯（safari有些拉胯??）。

這里有個疑惑是，都出來這么久了，為啥一直不知道呢？其實我也一直被 MDN 官網誤導了，首先，scroll-margin和scroll-padding?的官方示例中只有關于scroll-snap-type?的應用場景，導致我一直誤以為這個屬性就是和scroll-snap-type?搭配使用的，沒有朝其他方向上思考。另外，從時間上來看，這個屬性確實是和scroll-snap-type幾乎是一同推出的（chrome上），這點從兼容性上可以看出，這樣有點更堅信了前面的誤導。

所以，一直以來，這樣一個超級好用的 CSS 屬性被我忽略了，可惜：

不過，現在了解也不晚，下面來總結一下：

• 默認情況下自動滾動定位都是與滾動容器貼邊的，有時候并不美好。
• scroll-padding和scroll-margin可以在自動滾動定位時預留指定的間距。
• scroll-margin?作用對象是目標元素，scroll-padding作用對象是滾動容器。
• 滾動定位方式有錨點定位、scrollIntoView?定位、focus?定位、還有Scroll-snap定位。
• 體驗增強屬性，兼容性還不錯，主要是safari拖后腿。

對了，這個CSS屬性幾乎可以無腦使用，只要在滾動容器上加上這個屬性，就可以在不知不覺中提升滾動定位體驗，成本極低，希望可以多多使用。