好吧,其實不是頂飛,準確點說應該是h5頁面fiexed定位在底部的輸入框在ios軟鍵盤彈起的時候軟鍵盤跟輸入框有時會有一段懸空的距離,無法緊貼。在安卓機子上則沒有這樣的情況。
解決方法是通過h5的scrollIntoView去實現。scrollIntoView()可以在所有的HTML元素上調用,在滾動瀏覽器窗口,或者窗口發生變化時,可以調用該方法讓元素出現在視窗中。(本文的例子就是軟鍵盤的彈出改變了窗口的高度)
該方法不傳參數或者傳入true可以讓元素與視窗頂部齊平,如果傳入false調用元素會盡可能全部出現在視口中,(可能的話,調用元素的底部會與視口頂部平齊。)
具體代碼如下,用一個全局的定時器變量改變input框的狀態,在input框點擊或聚焦時觸發該定時器,失焦則清除定時器(這里用vue事件作為例子)
template模板
<input @click="viewAll" @blur="viewDefault" ref="replyInput" type="text" />
javascript模塊
var inputTimer = null;
viewAll: function(){
this.inputTimer = setInterval( () => {
this.$refs.replyInput.scrollIntoView(false);
},100);
},
viewDefault: function(){
clearInterval(this.inputTimer);
}
這個問題解決完呢,通常輸入框彈起的時候我們會給背景加個遮罩層,同時也不想背景滑動,這時候單單給body添加overflow hidden是不夠的,主要是ios的機子上無法兼容,so這時候最好還是給蒙板跟你的輸入框區域加上個touchmove事件,來去掉touchmove的默認事件。如
template模板 遮罩層
<div @touchmove="stopMove($event)" class="view-mask">
</div>
javascript模塊
stopMove: function(e){
e.preventDefault();
}
附上最近發現的另一個解決方案 http://efe.baidu.com/blog/mobile-fixed-layout/