Element.scrolltoView()

Element.scrollIntoView() 方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。

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

參數(shù)

1、element.scrollIntoView(); 不顯示聲明任何參數(shù)，則相當(dāng)于是element.scrollIntoView(true)
?
2、element.scrollIntoView(alignToTop);
Boolean類型參數(shù)
如果為 true，則元素的頂部將盡可能滾動(dòng)到與父元素可見區(qū)域頂部對(duì)齊的位置，這是默認(rèn)值。
如果為 false，則元素的底部將盡可能滾動(dòng)到與父元素可見區(qū)域底部對(duì)齊的位置
?
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)的方向，對(duì)應(yīng)Boolean類型參數(shù)，如果設(shè)置了start值，則相當(dāng)于是設(shè)置了element.scrollIntoView(true)，如果設(shè)置了end值，則相當(dāng)于是設(shè)置了element.scrollIntoView(false)

示例：

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

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

Element.scrollIntoViewIfNeeded()

Element.scrollIntoViewIfNeeded（）方法用來(lái)將不在瀏覽器窗口的可見區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域。 如果該元素已經(jīng)在瀏覽器窗口的可見區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)。 此方法是標(biāo)準(zhǔn)的Element.scrolltoView()方法的專有變體。

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

element.scrollIntoViewIfNeeded(); // 等同于element.scrollIntoViewIfNeeded(true) 
element.scrollIntoViewIfNeeded(true); 
element.scrollIntoViewIfNeeded(false);

參數(shù)

Element.scrollIntoViewIfNeeded(opt_center)

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

手機(jī)點(diǎn)擊輸入框時(shí)，當(dāng)鍵盤彈起，界面上彈，鍵盤收起，界面下來(lái)

var wHeight = window.innerHeight;   //獲取初始可視窗口高度
window.addEventListener('resize', function(){       //監(jiān)測(cè)窗口大小的變化事件
    var hh = window.innerHeight;     //當(dāng)前可視窗口高度
    ar viewTop = $(window).scrollTop();   //可視窗口高度頂部距離網(wǎng)頁(yè)頂部的距離
    if(wHeight > hh){           //可以作為虛擬鍵盤彈出事件
        $(".content").animate({scrollTop:viewTop+100});    //調(diào)整可視頁(yè)面的位置
    }else{         //可以作為虛擬鍵盤關(guān)閉事件
        $("content").animate({scrollTop:viewTop-100});
    }
    wHeight = hh;
});