狀況
在iOS下枪眉，如果頁面底部有個(gè)input輸入框，那么在input獲得焦點(diǎn)再层，彈出虛擬鍵盤時(shí)贸铜，有一定的幾率，input會(huì)被虛擬鍵盤給遮擋住聂受，體驗(yàn)很糟糕蒿秦。 尤其是第三方輸入法，這個(gè)出現(xiàn)的幾率極高蛋济。
這其實(shí)已經(jīng)是一個(gè)老生常談的問題棍鳖，從早期的iOS版本一直持續(xù)到現(xiàn)在iOS11都是這樣，感覺上像是iOS的bug，但是不知道為什么一直沒有解決渡处。
打印日志觀察镜悉，發(fā)現(xiàn)鍵盤彈出后，頁面窗口是變矮了医瘫，然后頁面滾動(dòng)到底部侣肄，即使是出現(xiàn)input框被虛擬鍵盤遮擋了，這個(gè)時(shí)候window.innerHeight + document.body.scrollTop 依然是和 document.body.scrollHeight相等的醇份，所以簡(jiǎn)單的對(duì)比這兩個(gè)數(shù)值來判斷頁面是否已經(jīng)滾動(dòng)到了底部是不行的稼锅。
網(wǎng)上查閱了大量的資料，提到了各種各樣的解決辦法僚纷，嘗試了不下10種矩距，基本上都不靠譜，不能最終解決畔濒，最后還是通過定時(shí)器動(dòng)態(tài)調(diào)整scrollTop解決了這個(gè)問題（仍舊不完美）剩晴。
中間踩過的一些坑
- 不要用fixed布局锣咒，iOS對(duì)fixed布局的支持比較弱侵状，在虛擬鍵盤彈出的時(shí)候，fixed布局的元素有可能出現(xiàn)各種各樣的問題毅整，建議直接用absolute布局取代
- 網(wǎng)上有說改用flex布局可以解決這個(gè)問題趣兄，實(shí)踐發(fā)現(xiàn)壓根沒用，大家可以不用再試
- 只調(diào)整一次scrollTop是不夠的悼嫉，最好在1秒內(nèi)調(diào)整多次艇潭，比如每300毫秒調(diào)整一次
解決之道
在input的focus事件中，開啟一個(gè)定時(shí)器戏蔑，然后每隔300毫秒進(jìn)行一次document.body.scrollTop=document.body.scrollHeight的調(diào)整蹋凝，運(yùn)行3次即可。然后在input的blur事件中总棵，取消掉這個(gè)定時(shí)器鳍寂。這樣雖然input不會(huì)被遮擋了，但是由于滾動(dòng)回彈的原因情龄，視覺上會(huì)有頁面回彈的效果迄汛，就是這點(diǎn)不太完美。
參考代碼如下：
var timerId = null;
onFocus(e) {
let cnt = 0;
setInterval( () => {
if (cnt < 3) {
cnt++;
} else {
clearInterval(timerId);
timerId = null;
return;
}
document.body.scrollTop = document.body.scrollHeight;
}, 300);
}
onBlur(e) {
if (timerId) {
clearInterval(timerId);
timerId = null;
}
}
