日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

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

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

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

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

dom.scrollIntoView()
dom.scrollIntoView(true)

這兩種效果是相同的

圖片

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

dom.scrollIntoview(false)

效果如下

圖片

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

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

效果都是一樣的，如下

圖片

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

這個稍微復(fù)雜一點，接著往下看。

二、詳解 scrollIntoViewOptions 參數(shù)

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

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

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

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

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

.list{
  scroll-behavior: smooth;
}

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

dom.scrollIntoView()

效果如下

圖片

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

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

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

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

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

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

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

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

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

這里簡單實現(xiàn)了一個上下切換的效果

圖片

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

圖片

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

實際效果如下

圖片

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

圖片

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

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

圖片

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

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

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

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

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

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

圖片

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

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

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

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

效果是這樣的...

圖片

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

這是因為垂直方向的默認(rèn)值為start，所以為了產(chǎn)生避免這樣的影響，可以這樣

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

這樣就不會上下跳動了

圖片

四、scrollIntoView 的邊距

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

圖片

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

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

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

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

.item{
  scroll-margin: 10px;
}

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

圖片

是不是舒服了很多？

五、scrollIntoViewIfNeeded

除了 「scrollIntoView」，還有個非標(biāo)準(zhǔn)的 「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);

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

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

圖片

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

圖片

完整 demo 可以參考以下鏈接

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

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

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

圖片

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

圖片

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

圖片

下面再來回顧一下這幾個關(guān)鍵詞

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

[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