大家可能都知道 dom 有一個 scrollIntoview方法，它可以輕易的讓目標元素滾動到可視范圍之內，而無需手動計算偏移量

dom.scrollIntoview()

效果如下

圖片

這樣跳轉比較生硬，因此可能還知道有這樣一個參數

dom.scrollIntoview({
  behavior: 'smooth'
})

這樣就能平滑滾動了

圖片

一、重新學習 scrollIntoView 語法

打開 MDN 官網

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

語法其實很簡單，有三種形式

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

首先看第 2 種形式，就一個參數「alignToTop」 布爾值

默認為 true，表示是否沿著元素的頂端和滾動容器對齊，否則和元素底端對齊。

dom.scrollIntoView()
dom.scrollIntoView(true)

這兩種效果是相同的

圖片

如果設置為false，那么會居底部對齊

dom.scrollIntoview(false)

效果如下

圖片

注意，「alignToTop」自適應于「垂直方向」上的滾動，如果是「水平方向」的滾動，設置了沒有任何區別。

// 水平滾動下，以下 3 種寫法作用相同
dom.scrollIntoview()
dom.scrollIntoview(true)
dom.scrollIntoview(false)

效果都是一樣的，如下

圖片

??為啥是居右側對齊呢？同時為了滿足兩個方向上的靈活控制，出現了 「scrollIntoViewOptions」 參數。

這個稍微復雜一點，接著往下看。

二、詳解 scrollIntoViewOptions 參數

「scrollIntoViewOptions」是一個對象，包含 3 個屬性，分別是 「behavior」、「block」、「inline」

dom.scrollIntoView({ 
  behavior: "smooth", 
  block: "end", 
  inline: "nearest" 
});

首先來看「behavior」屬性，這是用來定義滾動動畫的，有 3 個關鍵詞

• 「smooth」：平滑滾動
• 「instant」：無動畫，直接跳轉
• 「auto」：默認值，滾動行為由 scroll-behavior[1] 的計算值決定

默認情況下是 「auto」，也就是由 CSS scroll-behavior 屬性決定，如果我們給滾動容器添加了這個屬性

.list{
  scroll-behavior: smooth;
}

這樣，在不傳遞任何參數的情況下，也能實現平滑滾動

dom.scrollIntoView()

效果如下

圖片

一般情況下推薦使用 CSS 方式。

至于「instant」，實測和 「auto」 效果一致，如果設置了 CSS 平滑滾動，即使設置了scroll-behavior: instant仍然是平滑滾動，并不是我想象中的直接跳轉?。

接下來看第 2 個屬性「block」，這是用來定義「垂直方向」上的對齊方式，有 4 個關鍵詞

• 「start」：「默認值」。元素頂部和滾動容器頂部對齊
• 「center」：元素和滾動容器居中對齊
• 「end」：元素底部和滾動容器底部對齊
• 「nearest」：如果已經在視野范圍內，就不滾動，否則就滾動到頂部或者底部（哪個更靠近就滾到哪里）

其中，「start」 和 「end」分別是頂部對齊和底部對齊，效果等同于

// 以下寫法
dom.scrollIntoView({
  block: 'start'
})
dom.scrollIntoView({
  block: 'end'
})
// 等同于
dom.scrollIntoView(true)
dom.scrollIntoView(false)

前面已經演示過了，這里就不重復了

「center」是一個比較實用的屬性，可以讓元素一直處于中間位置，非常適合上一個、下一個切換的場景

dom.scrollIntoView({
  block: 'center'
})

這里簡單實現了一個上下切換的效果

圖片

「nearest」表示鄰近的，可能稍微復雜一點，會根據元素是否已經在可視范圍內做判斷，避免頻繁滾動，下面是一個原理演示

圖片

dom.scrollIntoView({
  block: 'nearest'
})

實際效果如下

圖片

如果用這個來實現上一個、下一個的功能，體驗可能會更好

圖片

非常適合下拉列表中的上下鍵盤操作（截圖為 Ant Design Select 組件）

https://ant.design/components/select-cn

圖片

還有個「inline」屬性，和「block」是一致的，只是用來定義「水平方向」上的對齊方式，也有 4 個關鍵詞

• 「start」：元素左側和滾動容器左側對齊
• 「center」：元素和滾動容器居中對齊
• 「end」：元素右側和滾動容器右側對齊
• 「nearest」：「默認值」。如果已經在視野范圍內，就不滾動，否則就滾動到左邊或者右邊（哪個更靠近就滾到哪里）

作用效果和前面完全是一致的，這里就不一一演示了。

有沒有發現？「block」 和 「inline」 的默認值是不一樣的，這也是為什么在水平滾動下，scrollIntoView(true)和scrollIntoView(false)效果完全一致了，就是因為水平方向上已經在可視區了，所以不會有任何滾動。

三、水平和垂直同時存在的情況

很多時候，頁面可能會存在水平和垂直都有滾動的情況，例如下面這種

圖片

整個頁面是可以上下滾動的，然后頁面中包含一個可以橫向滾動的區域。

如果這時想要將紅色部分滾動到可視區中間，應該怎么做？

按照前面的參數，可能會想到這樣

dom.scrollIntoView({
  inline: 'center'
})

效果是這樣的...

圖片

可以看到，水平方向確實滾動到了中間，但是垂直方向上滾動到了最頂部。

這是因為垂直方向的默認值為start，所以為了產生避免這樣的影響，可以這樣

dom.scrollIntoView({
  block: 'neareast',
  inline: 'center',
})

這樣就不會上下跳動了

圖片

四、scrollIntoView 的邊距

大家發現沒，在使用start、end這些屬性值的時候，元素滾動到視野范圍之內都是緊靠邊緣的

圖片

視覺上有點不好看，有沒有辦法預留一點空間呢？

當然有了，不過不是 「scrollIntoView」本身，而是需要借助 CSS 中的 「scroll-margin」屬性。關于這個特性，之前在這篇文章有有詳細介紹，有興趣的可以回顧一下

提升滾動體驗！CSS 如何設置自動滾動定位的“安全”間距？（跳轉公眾號）

因此在這里，要留點間距也很簡單，只需要

.item{
  scroll-margin: 10px;
}

再看看前面的上一個、下一個效果

圖片

是不是舒服了很多？

五、scrollIntoViewIfNeeded

除了 「scrollIntoView」，還有個非標準的 「scrollIntoViewIfNeeded」，-webkit-支持

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewIfNeeded

顧名思義，就是只有需要滾動定位的時候才會滾動，和neareast功能有點像

這個方法可以傳遞一個布爾值

element.scrollIntoViewIfNeeded(); // 等同于 element.scrollIntoViewIfNeeded(true)
element.scrollIntoViewIfNeeded(true);
element.scrollIntoViewIfNeeded(false);

表示在滾動到視線范圍之內時是否「居中對齊」。

這是和scrollIntoView不太一樣的地方，相當于同時滿足了neareast和center的功能，非常適合用在需要初始化滾動的場景，比如這種滾動定位的任務進度條

圖片

下面用一個簡單案例模擬一下

圖片

完整 demo 可以參考以下鏈接

• scrollIntoViewIfNeed (juejin.cn)[2]
• scrollIntoViewIfNeeded (codepen.io)[3]

六、兼容性和總結

「Scrollintoview」是個兼容性非常好的屬性，有多好呢？連 IE6 都支持

圖片

當然這只是基礎功能，也就是滾動到視區范圍，像 options 參數都是后來才出現的，兼容性稍微差一點

圖片

另外，你可能發現，在 safari 上平滑滾動不支持，因此推薦用 CSS scroll-behavior的方式，兼容性稍微好一點（15.4+）

圖片

下面再來回顧一下這幾個關鍵詞

• 「start」：元素頂部和滾動容器頂部（左側）對齊
• 「center」：元素和滾動容器居中對齊
• 「end」：元素底部和滾動容器底部（右側）對齊
• 「nearest」：如果已經在視野范圍內，就不滾動，否則就滾動到頂部（左側）或者底部（右側）（哪個更靠近就滾到哪里）

[1]scroll-behavior： https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior

[2]scrollIntoViewIfNeed (juejin.cn)： https://code.juejin.cn/pen/7279261289191309375

[3]scrollIntoViewIfNeeded (codepen.io)： https://codepen.io/xboxyan/pen/dywzrPB