Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內

語法

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

 

參數

alignToTop (Boolean型參數)

1.如果為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。
2.如果為false，元素的底端將和其所在滾動區的可視區域的底端對齊。

 

scrollIntoViewOptions (Object型參數)

{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}
1.如果是一個boolean，true 相當於{block: "start"}，false 相當於{block: "end"}
2.behavior這個選項決定頁面是如何滾動的，實測auto與instant都是瞬間跳到相應的位置，而smooth就是有動畫的過程

 

示例

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

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

 

注意

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