大家可能都知道 dom 有一個(gè) scrollIntoview方法，它可以輕易的讓目標(biāo)元素滾動(dòng)到可視范圍之內(nèi)，而無(wú)需手動(dòng)計(jì)算偏移量

dom.scrollIntoview()

效果如下

圖片

這樣跳轉(zhuǎn)比較生硬，因此可能還知道有這樣一個(gè)參數(shù)

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

這樣就能平滑滾動(dòng)了

圖片

一、重新學(xué)習(xí) scrollIntoView 語(yǔ)法

打開(kāi) MDN 官網(wǎng)

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

語(yǔ)法其實(shí)很簡(jiǎn)單，有三種形式

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

首先看第 2 種形式，就一個(gè)參數(shù)「alignToTop」 布爾值

默認(rèn)為 true，表示是否沿著元素的頂端和滾動(dòng)容器對(duì)齊，否則和元素底端對(duì)齊。

dom.scrollIntoView()
dom.scrollIntoView(true)

這兩種效果是相同的

圖片

如果設(shè)置為false，那么會(huì)居底部對(duì)齊

dom.scrollIntoview(false)

效果如下

圖片

注意，「alignToTop」自適應(yīng)于「垂直方向」上的滾動(dòng)，如果是「水平方向」的滾動(dòng)，設(shè)置了沒(méi)有任何區(qū)別。

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

效果都是一樣的，如下

圖片

??為啥是居右側(cè)對(duì)齊呢？同時(shí)為了滿足兩個(gè)方向上的靈活控制，出現(xiàn)了 「scrollIntoViewOptions」 參數(shù)。

這個(gè)稍微復(fù)雜一點(diǎn)，接著往下看。

二、詳解 scrollIntoViewOptions 參數(shù)

「scrollIntoViewOptions」是一個(gè)對(duì)象，包含 3 個(gè)屬性，分別是 「behavior」、「block」、「inline」

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

首先來(lái)看「behavior」屬性，這是用來(lái)定義滾動(dòng)動(dòng)畫的，有 3 個(gè)關(guān)鍵詞

• 「smooth」：平滑滾動(dòng)
• 「instant」：無(wú)動(dòng)畫，直接跳轉(zhuǎn)
• 「auto」：默認(rèn)值，滾動(dòng)行為由 scroll-behavior[1] 的計(jì)算值決定

默認(rèn)情況下是 「auto」，也就是由 CSS scroll-behavior 屬性決定，如果我們給滾動(dòng)容器添加了這個(gè)屬性

.list{
  scroll-behavior: smooth;
}

這樣，在不傳遞任何參數(shù)的情況下，也能實(shí)現(xiàn)平滑滾動(dòng)

dom.scrollIntoView()

效果如下

圖片

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

至于「instant」，實(shí)測(cè)和 「auto」 效果一致，如果設(shè)置了 CSS 平滑滾動(dòng)，即使設(shè)置了scroll-behavior: instant仍然是平滑滾動(dòng)，并不是我想象中的直接跳轉(zhuǎn)?。

接下來(lái)看第 2 個(gè)屬性「block」，這是用來(lái)定義「垂直方向」上的對(duì)齊方式，有 4 個(gè)關(guān)鍵詞

• 「start」：「默認(rèn)值」。元素頂部和滾動(dòng)容器頂部對(duì)齊
• 「center」：元素和滾動(dòng)容器居中對(duì)齊
• 「end」：元素底部和滾動(dòng)容器底部對(duì)齊
• 「nearest」：如果已經(jīng)在視野范圍內(nèi)，就不滾動(dòng)，否則就滾動(dòng)到頂部或者底部（哪個(gè)更靠近就滾到哪里）

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

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

前面已經(jīng)演示過(guò)了，這里就不重復(fù)了

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

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

這里簡(jiǎn)單實(shí)現(xiàn)了一個(gè)上下切換的效果

圖片

「nearest」表示鄰近的，可能稍微復(fù)雜一點(diǎn)，會(huì)根據(jù)元素是否已經(jīng)在可視范圍內(nèi)做判斷，避免頻繁滾動(dòng)，下面是一個(gè)原理演示

圖片

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

實(shí)際效果如下

圖片

如果用這個(gè)來(lái)實(shí)現(xiàn)上一個(gè)、下一個(gè)的功能，體驗(yàn)可能會(huì)更好

圖片

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

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

圖片

還有個(gè)「inline」屬性，和「block」是一致的，只是用來(lái)定義「水平方向」上的對(duì)齊方式，也有 4 個(gè)關(guān)鍵詞

• 「start」：元素左側(cè)和滾動(dòng)容器左側(cè)對(duì)齊
• 「center」：元素和滾動(dòng)容器居中對(duì)齊
• 「end」：元素右側(cè)和滾動(dòng)容器右側(cè)對(duì)齊
• 「nearest」：「默認(rèn)值」。如果已經(jīng)在視野范圍內(nèi)，就不滾動(dòng)，否則就滾動(dòng)到左邊或者右邊（哪個(gè)更靠近就滾到哪里）

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

有沒(méi)有發(fā)現(xiàn)？「block」 和 「inline」 的默認(rèn)值是不一樣的，這也是為什么在水平滾動(dòng)下，scrollIntoView(true)和scrollIntoView(false)效果完全一致了，就是因?yàn)樗椒较蛏弦呀?jīng)在可視區(qū)了，所以不會(huì)有任何滾動(dòng)。

三、水平和垂直同時(shí)存在的情況

很多時(shí)候，頁(yè)面可能會(huì)存在水平和垂直都有滾動(dòng)的情況，例如下面這種

圖片

整個(gè)頁(yè)面是可以上下滾動(dòng)的，然后頁(yè)面中包含一個(gè)可以橫向滾動(dòng)的區(qū)域。

如果這時(shí)想要將紅色部分滾動(dòng)到可視區(qū)中間，應(yīng)該怎么做？

按照前面的參數(shù)，可能會(huì)想到這樣

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

效果是這樣的...

圖片

可以看到，水平方向確實(shí)滾動(dòng)到了中間，但是垂直方向上滾動(dòng)到了最頂部。

這是因?yàn)榇怪狈较虻哪J(rèn)值為start，所以為了產(chǎn)生避免這樣的影響，可以這樣

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

這樣就不會(huì)上下跳動(dòng)了

圖片

四、scrollIntoView 的邊距

大家發(fā)現(xiàn)沒(méi)，在使用start、end這些屬性值的時(shí)候，元素滾動(dòng)到視野范圍之內(nèi)都是緊靠邊緣的

圖片

視覺(jué)上有點(diǎn)不好看，有沒(méi)有辦法預(yù)留一點(diǎn)空間呢？

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

提升滾動(dòng)體驗(yàn)！CSS 如何設(shè)置自動(dòng)滾動(dòng)定位的“安全”間距？（跳轉(zhuǎn)公眾號(hào)）

因此在這里，要留點(diǎn)間距也很簡(jiǎn)單，只需要

.item{
  scroll-margin: 10px;
}

再看看前面的上一個(gè)、下一個(gè)效果

圖片

是不是舒服了很多？

五、scrollIntoViewIfNeeded

除了 「scrollIntoView」，還有個(gè)非標(biāo)準(zhǔn)的 「scrollIntoViewIfNeeded」，-webkit-支持

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

顧名思義，就是只有需要滾動(dòng)定位的時(shí)候才會(huì)滾動(dòng)，和neareast功能有點(diǎn)像

這個(gè)方法可以傳遞一個(gè)布爾值

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

表示在滾動(dòng)到視線范圍之內(nèi)時(shí)是否「居中對(duì)齊」。

這是和scrollIntoView不太一樣的地方，相當(dāng)于同時(shí)滿足了neareast和center的功能，非常適合用在需要初始化滾動(dòng)的場(chǎng)景，比如這種滾動(dòng)定位的任務(wù)進(jìn)度條

圖片

下面用一個(gè)簡(jiǎn)單案例模擬一下

圖片

完整 demo 可以參考以下鏈接

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

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

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

圖片

當(dāng)然這只是基礎(chǔ)功能，也就是滾動(dòng)到視區(qū)范圍，像 options 參數(shù)都是后來(lái)才出現(xiàn)的，兼容性稍微差一點(diǎn)

圖片

另外，你可能發(fā)現(xiàn)，在 safari 上平滑滾動(dòng)不支持，因此推薦用 CSS scroll-behavior的方式，兼容性稍微好一點(diǎn)（15.4+）

圖片

下面再來(lái)回顧一下這幾個(gè)關(guān)鍵詞

• 「start」：元素頂部和滾動(dòng)容器頂部（左側(cè)）對(duì)齊
• 「center」：元素和滾動(dòng)容器居中對(duì)齊
• 「end」：元素底部和滾動(dòng)容器底部（右側(cè)）對(duì)齊
• 「nearest」：如果已經(jīng)在視野范圍內(nèi)，就不滾動(dòng)，否則就滾動(dòng)到頂部（左側(cè)）或者底部（右側(cè)）（哪個(gè)更靠近就滾到哪里）

[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