最近做一個(gè)移動(dòng)專題中看到別人使用這個(gè)API實(shí)現(xiàn)進(jìn)入頁面就能置頂特定的元素，看了一下文檔才發(fā)現(xiàn)還可以解決Android下虛擬鍵盤出來而頁面沒有上移的情況。今天一起來看看scrollIntoView與scrollIntoViewIfNeed的API以及實(shí)際應(yīng)用。

scrolltoView

盡可能（向上或向下）滾動(dòng)瀏覽器窗口或容器元素，以便在當(dāng)前視窗的可見范圍看見當(dāng)前元素。
存在三個(gè)重載參數(shù)：

1. element.scrollIntoView();不顯示聲明任何參數(shù)，則相當(dāng)于是element.scrollIntoView(true)
2. element.scrollIntoView(alignToTop);Boolean類型參數(shù)
   • 如果為 true，則元素的頂部將盡可能滾動(dòng)到與父元素可見區(qū)域頂部對齊的位置，這是默認(rèn)值。
   • 如果為 false，則元素的底部將盡可能滾動(dòng)到與父元素可見區(qū)域底部對齊的位置
3. element.scrollIntoView(scrollIntoViewOptions);
   Object類型參數(shù)
{
behavior: 'auto' | 'instant' | 'smooth',
block: 'start' | 'end'
}

   • behavior：定義了元素滾動(dòng)的行為，instant代表是立即滾動(dòng)元素，smooth代表動(dòng)畫性的平滑滾動(dòng)，但大部分瀏覽器并不支持smooth這個(gè)屬性值，一般都是 instant。
   • block：定義了元素滾動(dòng)的方向，對應(yīng)Boolean類型參數(shù)，如果設(shè)置了start值，則相當(dāng)于是設(shè)置了element.scrollIntoView(true)，如果設(shè)置了end值，則相當(dāng)于是設(shè)置了element.scrollIntoView(false)，

需要注意的是，無論是滾動(dòng)到父元素的頂部還是底部，并不代表子元素會(huì)完全滾動(dòng)到那個(gè)位置，瀏覽器只是盡可能讓子元素完全與父元素頂部或者底部對齊，但也有可能滾動(dòng)到的位置距離父元素頂部或者底部還差一些距離，這取決于頁面中其他元素的布局。

至于其兼容性，MDN上說這是一個(gè)實(shí)驗(yàn)性的 API，并不在 DOM規(guī)范中，但到 caniuse.com上一看，發(fā)現(xiàn)幾乎所有瀏覽器都支持這個(gè) API：

MDN上示例如下：

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

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

scrollIntoViewIfNeeded

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

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

MDN 聲明此API是非標(biāo)準(zhǔn)的方法，支持的瀏覽器也比較少，不過如果只是考慮移動(dòng)端的場景，那么完全是可以使用的。

實(shí)際應(yīng)用

在移動(dòng)端安卓 鍵盤出來覆蓋頁面（頁面沒有上移）

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。