狀況

在iOS下，如果頁面底部有個input輸入框，那么在input獲得焦點(diǎn)，彈出虛擬鍵盤時，有一定的幾率，input會被虛擬鍵盤給遮擋住，體驗(yàn)很糟糕。 尤其是第三方輸入法，這個出現(xiàn)的幾率極高。
這其實(shí)已經(jīng)是一個老生常談的問題，從早期的iOS版本一直持續(xù)到現(xiàn)在iOS11都是這樣，感覺上像是iOS的bug，但是不知道為什么一直沒有解決。
打印日志觀察，發(fā)現(xiàn)鍵盤彈出后，頁面窗口是變矮了，然后頁面滾動到底部，即使是出現(xiàn)input框被虛擬鍵盤遮擋了，這個時候window.innerHeight + document.body.scrollTop 依然是和 document.body.scrollHeight相等的，所以簡單的對比這兩個數(shù)值來判斷頁面是否已經(jīng)滾動到了底部是不行的。
網(wǎng)上查閱了大量的資料，提到了各種各樣的解決辦法，嘗試了不下10種，基本上都不靠譜，不能最終解決，最后還是通過定時器動態(tài)調(diào)整scrollTop解決了這個問題（仍舊不完美）。

中間踩過的一些坑

1. 不要用fixed布局，iOS對fixed布局的支持比較弱，在虛擬鍵盤彈出的時候，fixed布局的元素有可能出現(xiàn)各種各樣的問題，建議直接用absolute布局取代
2. 網(wǎng)上有說改用flex布局可以解決這個問題，實(shí)踐發(fā)現(xiàn)壓根沒用，大家可以不用再試
3. 只調(diào)整一次scrollTop是不夠的，最好在1秒內(nèi)調(diào)整多次，比如每300毫秒調(diào)整一次

解決之道

在input的focus事件中，開啟一個定時器，然后每隔300毫秒進(jìn)行一次document.body.scrollTop=document.body.scrollHeight的調(diào)整，運(yùn)行3次即可。然后在input的blur事件中，取消掉這個定時器。這樣雖然input不會被遮擋了，但是由于滾動回彈的原因，視覺上會有頁面回彈的效果，就是這點(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;
  }
}