最近做一個移動端的頁面，有一個輸入框是放在了頁面的底部，當點選輸入框彈出輸入法虛擬鍵盤的時候，出現了虛擬鍵盤遮擋輸入框的情況，雖然手動向上滑動頁面將輸入框滑到可視範圍內，但在一定程度上影響了使用者體驗，若能解決掉這個問題，最好不過了，到網上查了一下，很顯然不止我一個人遇到這種問題，而解決方案，居然也很簡單，那就是藉助一個很多人可能都沒見過的瀏覽器原生 API。

Element.scrolltoView()

儘可能（向上或向下）滾動瀏覽器視窗或容器元素，以便在當前視窗的可見範圍看見當前元素。

存在三個過載引數：

1. element.scrollIntoView();
   
   不顯示宣告任何引數，則相當於是element.scrollIntoView(true)
    
2. element.scrollIntoView(alignToTop);
   Boolean型別引數
   
   • 如果為 true，則元素的頂部將盡可能滾動到與父元素可見區域頂部對齊的位置，這是預設值。
   • 如果為 false，則元素的底部將盡可能滾動到與父元素可見區域底部對齊的位置
      
3. element.scrollIntoView(scrollIntoViewOptions);
   Object型別引數
   
{
behavior: 'auto' | 'instant' | 'smooth',
block: 'start' | 'end'
}

   
   
   • behavior：定義了元素滾動的行為，instant代表是立即滾動元素，smooth代表動畫性的平滑滾動，但大部分瀏覽器並不支援smooth這個屬性值，一般都是 instant。
   • block：定義了元素滾動的方向，對應Boolean型別引數，如果設定了start值，則相當於是設定了element.scrollIntoView(true)，如果設定了end值，則相當於是設定了element.scrollIntoView(false)，

需要注意的是，無論是滾動到父元素的頂部還是底部，並不代表子元素會完全滾動到那個位置，瀏覽器只是儘可能讓子元素完全與父元素頂部或者底部對齊，但也有可能滾動到的位置距離父元素頂部或者底部還差一些距離，這取決於頁面中其他元素的佈局。

至於其相容性，MDN上說這是一個實驗性的 API，並不在 DOM規範中，但到 caniuse.com上一看，發現幾乎所有瀏覽器都支援這個 API：

MDN上示例如下：

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

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

Element.scrollIntoViewIfNeeded()

只在當前元素在視窗的可見範圍內不可見的情況下，才滾動瀏覽器視窗或容器元素，最終讓當前元素可見。如果當前元素在視窗中已經可見了，那麼這個方法將不做任何處理，此方法是對Element.scrolltoView()的進一步補充。

存在一個Boolean型別引數：

Element.scrollIntoViewIfNeeded(opt_center)

1. 如果設定為 true,並且當前元素在視窗的可見範圍內不可見，元素將盡量滾動到父元素可視區域的中部位置（垂直方向）
2. 如果設定為 false,並且當前元素在視窗的可見範圍內不可見，元素將盡量滾動到父元素可視區域距離最近的一邊，至於到底滾動到父元素的頂部還是底部，取決於滾動的子元素距離父元素的哪一邊比較近。

MDN 宣告此API是非標準的方法，支援的瀏覽器也比較少，不過如果只是考慮移動端的場景，那麼完全是可以使用的。