重新學習 scrollIntoview
大家可能都知道 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
