scrollIntoView()

? DOM 規范中沒有涉及的一個問題是如何滾動頁面中的某個區域。為填充這方面的缺失，不同瀏覽器實現了不同的控制滾動的方式。在所有這些專有方法中，HTML5 選擇了標準化 scrollIntoView()。

? scrollIntoView() 方法存在于所有 HTML 元素上，可以滾動瀏覽器窗口或容器元素以便包含元素進入視口。這個方法的參數如下：

• alignToTop 是一個布爾值。
  • true：窗口滾動后元素的頂部與視口頂部對齊。
  • false：窗口滾動后元素的底部與視口底部對齊。
• scrollIntoViewOptions 是一個選項對象。
  • behavior：定義過渡動畫，可取的值為"smooth"和"auto"，默認為"auto"。
  • block：定義垂直方向的對齊，可取的值為"start"、“center”、“end” 和 “nearest”，默認為 “start”。
  • inline：定義水平方向的對齊，可取的值為"start"、“center”、“end” 和 “nearest”，默認為 “nearest”。
• 不傳參數等同于 alignToTop 為 true。

來看幾個例子：

// 確保元素可見
document.forms[0].scrollIntoView(); // 同上
document.forms[0].scrollIntoView(true); 
document.forms[0].scrollIntoView({block: 'start'}); // 嘗試將元素平滑地滾入視口
document.forms[0].scrollIntoView({behavior: 'smooth', block: 'start'}); 

? 這個方法可以用來在頁面上發生某個事件時引起用戶關注。把焦點設置到一個元素上也會導致瀏覽器將元素滾動到可見位置。