在平時(shí)開(kāi)發(fā)中，經(jīng)常會(huì)碰到需要快速定位的問(wèn)題，比如常見(jiàn)的錨點(diǎn)定位。

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

這樣，在點(diǎn)擊a標(biāo)簽時(shí)會(huì)自動(dòng)定位到與之相對(duì)應(yīng)的內(nèi)容上，如下：

但是，這種通過(guò)錨點(diǎn)觸發(fā)的定位默認(rèn)是緊貼滾動(dòng)容器邊緣的，如果一些定位元素，比如fixed定位的頭部，就會(huì)出現(xiàn)被遮擋的情況，如下：

可以看到，“示例”這個(gè)標(biāo)題由于緊貼頂部，導(dǎo)致被sticky定位的頭部遮住了。

那么，如何讓自動(dòng)定位時(shí)讓目標(biāo)元素預(yù)留出足夠大的間距呢？

一、一行 CSS解決

沒(méi)錯(cuò)，看似有些麻煩的問(wèn)題其實(shí)可以通過(guò)一行 CSS 解決，那就是 scroll-margin[3] ，下面是 MDN 的介紹。

scroll-margin 屬性的值代表用于將盒元素拖拽到顯示區(qū)域的拖拽滾動(dòng)區(qū)域的起點(diǎn)。拖拽滾動(dòng)區(qū)域由是由轉(zhuǎn)換后邊框大小的盒元素決定的，它會(huì)找到盒元素的矩形邊界（在滾動(dòng)的容器的坐標(biāo)空間軸上），并添加指定的起點(diǎn)。

這個(gè)描述很官方，有點(diǎn)不知道在說(shuō)什么，導(dǎo)致很長(zhǎng)一段時(shí)間都不知道這個(gè)屬性的真正用途。

在上面這個(gè)例子中，可以直接給目標(biāo)設(shè)置scroll-margin。

h2{
  scroll-margin: 6rem; 
}

設(shè)置這個(gè)屬性后，當(dāng)自動(dòng)滾動(dòng)定位到h2?時(shí)，會(huì)自動(dòng)預(yù)留6rm?的間隔（可以防止被頭部遮擋），下面是演示（紅框表示6rem的間隔）

是不是非常簡(jiǎn)單，最終效果如下：

其實(shí)，MDN官方已經(jīng)采用了這種方式，經(jīng)?？纯?MDN，會(huì)發(fā)現(xiàn)有很多非常巧妙的實(shí)現(xiàn)，如下：

二、還有一個(gè) scroll-padding

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

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

html{
  scroll-padding: 6rem
}

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

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

三、其他滾動(dòng)定位方式

除了錨點(diǎn)定位以外，還有其他一些方式可以觸發(fā)滾動(dòng)定位。

1. scrollIntoView

有時(shí)候，我們需要將指定元素滾動(dòng)到視線范圍之內(nèi)，這時(shí)就需要用到這樣一個(gè)DOM方法：scrollIntoView[5]。

element.scrollIntoView();

這個(gè)定位和前面的錨點(diǎn)定位一樣，默認(rèn)也是緊貼滾動(dòng)容器的，如果設(shè)置了scroll-margin?或者scroll-pading，也可以實(shí)現(xiàn)在滾動(dòng)定位時(shí)自動(dòng)預(yù)留一定間距

2. focus 定位

在默認(rèn)情況下，元素（比如a?鏈接）在focus?聚焦時(shí)都會(huì)自動(dòng)滾動(dòng)到視線范圍之內(nèi)。和上面幾種情況一樣，如果有fixed?定位元素，有可能在focus時(shí)被遮擋的問(wèn)題。

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

3. scroll-snap

還有一種情況是滾動(dòng)捕捉：scroll-snap-type[6]，這個(gè)屬性可以讓滾動(dòng)時(shí)自動(dòng)捕捉臨界點(diǎn)。正常情況下，滾動(dòng)臨界點(diǎn)是緊貼滾動(dòng)容器的，像這樣：

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

可以看到，在滾動(dòng)到第2個(gè)元素時(shí)，提前預(yù)留了一定的距離，而且還可以設(shè)置負(fù)值，這樣在滾動(dòng)到第2個(gè)元素時(shí)，可以提前看到第3個(gè)的部分內(nèi)容。

四、兼容性和總結(jié)

最后來(lái)看一下兼容性，一個(gè)體驗(yàn)增強(qiáng)屬性，兼容性還不錯(cuò)（safari有些拉胯??）。

這里有個(gè)疑惑是，都出來(lái)這么久了，為啥一直不知道呢？其實(shí)我也一直被 MDN 官網(wǎng)誤導(dǎo)了，首先，scroll-margin和scroll-padding?的官方示例中只有關(guān)于scroll-snap-type?的應(yīng)用場(chǎng)景，導(dǎo)致我一直誤以為這個(gè)屬性就是和scroll-snap-type?搭配使用的，沒(méi)有朝其他方向上思考。另外，從時(shí)間上來(lái)看，這個(gè)屬性確實(shí)是和scroll-snap-type幾乎是一同推出的（chrome上），這點(diǎn)從兼容性上可以看出，這樣有點(diǎn)更堅(jiān)信了前面的誤導(dǎo)。

所以，一直以來(lái)，這樣一個(gè)超級(jí)好用的 CSS 屬性被我忽略了，可惜：

不過(guò)，現(xiàn)在了解也不晚，下面來(lái)總結(jié)一下：

• 默認(rèn)情況下自動(dòng)滾動(dòng)定位都是與滾動(dòng)容器貼邊的，有時(shí)候并不美好。
• scroll-padding和scroll-margin可以在自動(dòng)滾動(dòng)定位時(shí)預(yù)留指定的間距。
• scroll-margin?作用對(duì)象是目標(biāo)元素，scroll-padding作用對(duì)象是滾動(dòng)容器。
• 滾動(dòng)定位方式有錨點(diǎn)定位、scrollIntoView?定位、focus?定位、還有Scroll-snap定位。
• 體驗(yàn)增強(qiáng)屬性，兼容性還不錯(cuò)，主要是safari拖后腿。

對(duì)了，這個(gè)CSS屬性幾乎可以無(wú)腦使用，只要在滾動(dòng)容器上加上這個(gè)屬性，就可以在不知不覺(jué)中提升滾動(dòng)定位體驗(yàn)，成本極低，希望可以多多使用。