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

創(chuàng)新互聯(lián)公司-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比嵩明網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式嵩明網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋嵩明地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴(lài)。

Element 接口的scrollIntoView()方法會(huì)滾動(dòng)元素的父容器，使被調(diào)用scrollIntoView()的元素對(duì)用戶(hù)可見(jiàn)。

語(yǔ)法

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

參數(shù)

alignToTop可選

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

scrollIntoViewOptions 可選

一個(gè)包含下列屬性的對(duì)象：

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

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

3. inline 可選
   定義水平方向的對(duì)齊， “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"});

注意

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

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