最近做一個移動專題中看到別人使用這個API實現進入頁面就能置頂特定的元素，看了一下文檔才發現還可以解決Android下虛擬鍵盤出來而頁面沒有上移的情況。今天一起來看看scrollIntoView與scrollIntoViewIfNeed的API以及實際應用。

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"});

scrollIntoViewIfNeeded

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

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

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

實際應用

在移動端安卓 鍵盤出來覆蓋頁面（頁面沒有上移）

if (/Android/gi.test(navigator.userAgent)) {
window.addEventListener('resize', function () {
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
$('#orderidNum').blur(function(){
document.activeElement.scrollIntoViewIfNeeded();
});
})
}

總結

以上是生活随笔為你收集整理的scrollIntoView与scrollIntoViewIfNeed学习及应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。