測(cè)試移動(dòng)端頁(yè)面的時(shí)候单匣，偶然發(fā)現(xiàn)點(diǎn)擊底部input輸入框時(shí)，彈出的虛擬鍵盤(pán)偶爾會(huì)擋住input輸入框。
輸入框固定在頁(yè)面底部掐场，如圖所示：
測(cè)試過(guò)多臺(tái)真機(jī)發(fā)現(xiàn)安卓的手機(jī)都不會(huì)出現(xiàn)這個(gè)問(wèn)題躯保，個(gè)別的iOS手機(jī)有問(wèn)題旋膳。而且同一型號(hào)的蘋(píng)果有的有問(wèn)題有的沒(méi)有問(wèn)題。經(jīng)過(guò)多方的歸納途事、總結(jié)驚奇的發(fā)現(xiàn)：會(huì)出現(xiàn)這個(gè)bug的蘋(píng)果手機(jī)验懊，使用的都是蘋(píng)果第三方輸入法，而使用蘋(píng)果自帶的輸入法則沒(méi)有這個(gè)bug尸变。
出現(xiàn)這個(gè)bug的時(shí)候輸入字符的時(shí)候义图，input輸入框又會(huì)滾動(dòng)上去。沿著這個(gè)思路往下想召烂，我想到input獲取焦點(diǎn)失敗碱工、滾動(dòng)瀏覽器窗口或容器元素的問(wèn)題。
解決這個(gè)問(wèn)題的思路是奏夫，點(diǎn)擊input輸入框的時(shí)候怕篷，讓其input滾動(dòng)到當(dāng)前div的頂部。于是我想到了Element.scrollIntoView() 方法酗昼。
DOM規(guī)范中并沒(méi)有規(guī)定各瀏覽器需要實(shí)現(xiàn)怎樣的滾動(dòng)頁(yè)面區(qū)域廊谓，各瀏覽器實(shí)現(xiàn)了相應(yīng)的方法，可以使用不同的方式控制頁(yè)面區(qū)域的滾動(dòng)麻削。這些方法作為HTMLElement類(lèi)型的擴(kuò)展存在蒸痹，所以它能在所有元素上使用。
Element.scrollIntoView()語(yǔ)法：
element.scrollIntoView(); // Equivalent to element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean arguments
element.scrollIntoView(scrollIntoViewOptions); // Object argument
參數(shù)：alignToTop（可選）
Is a Boolean value:
If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. This is the default value.（ 如果alignToTop為true呛哟，該元素的頂部將對(duì)齊的滾動(dòng)的祖先的可見(jiàn)區(qū)域的頂部叠荠。這是默認(rèn)值。）
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.（如果alignToTop false竖共， 該元素的底部將對(duì)齊的滾動(dòng)的祖先的可見(jiàn)區(qū)域的底部蝙叛。）
點(diǎn)擊input底部輸入框，軟鍵盤(pán)擋住輸入框的解決辦法是公给，點(diǎn)擊輸入框的時(shí)候給input綁定事件借帘，使用 Element.scrollIntoView()方法使元素彈到祖元素可見(jiàn)區(qū)域的頂部蜘渣。代碼如下：
jQuery的寫(xiě)法：
$("input").on("click", function() {
var target = this;
setTimeOut(function() {
target.scrollIntoView(true);
}, 100);
})
vue的寫(xiě)法：
foot_input(){
? let _this =document.getElementById("reply");
setTimeout(function() {
_this.scrollIntoView(true);
},100);
},然后在input輸入框中綁定這個(gè)函數(shù)
