JS Element.scrollIntoView()怎么使用

這篇文章主要講解了“JS Element.scrollIntoView()怎么使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JS Element.scrollIntoView()怎么使用”吧！

Element 接口的scrollIntoView()方法會滾動元素的父容器，使被調(diào)用scrollIntoView()的元素對用戶可見。

語法

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型參數(shù)
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)

參數(shù)

alignToTop可選

一個Boolean值：
如果為true，元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。相應(yīng)的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。這是這個參數(shù)的默認(rèn)值。
如果為false，元素的底端將和其所在滾動區(qū)的可視區(qū)域的底端對齊。相應(yīng)的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。

scrollIntoViewOptions 可選

一個包含下列屬性的對象：

1. behavior 可選
   定義動畫過渡效果， "auto"或 “smooth” 之一。默認(rèn)為 “auto”。

2. block 可選
   定義垂直方向的對齊， “start”, “center”, “end”, 或 "nearest"之一。默認(rèn)為 “start”。

3. inline 可選
   定義水平方向的對齊， “start”, “center”, “end”, 或 "nearest"之一。默認(rèn)為 “nearest”。

示例

var element = document.getElementById("box");

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

注意

取決于其它元素的布局情況，此元素可能不會完全滾動到頂端或底端。

感謝各位的閱讀，以上就是“JS Element.scrollIntoView()怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JS Element.scrollIntoView()怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！