ios十二、ios13系統的微信瀏覽器在軟鍵盤收起時，頁面沒法回滾的bug修復

修改記錄：

• 2019.10.12 發現ios13存在一樣問題，增長了想要修復代碼

bug如題，圖片以下：

有bug的解決方案

在輸入框上監聽blur事件，事件觸發後將body滾動至底部。

functiont scrollTop () {
    // ios12有效
    window.document.body.scrollTop = window.document.body.scrollHeight;
    // ios13有效 2019.10.12增長
    window.document.documentElement.scrollTop = window.document.body.scrollHeight;
}
// el是輸入框
el.onblur = scrollTop;
複製代碼

新寫了兩bug

• bug1: 點擊「提交留言」按鈕，雖然軟鍵盤收起後頁面回滾至底部，可是提交事件沒有觸發
• bug2: 在多個輸入框間切換輸入，頁面滾動凌亂了，頁面先滾至底部又滾回至輸入框在但是區域

解決新bug1

緣由：

• 輸入框blur事件發生在其餘事件以前
• 事件回調是同步執行
• 頁面滾動了，致使頁面的point點座標不在「提交留言」按鈕的位置
• 沒法觸發「提交留言」按鈕的點擊事件

解決：

// el是輸入框
el.onblur = () => {
    setTimeout(scrollTop, 0);
};
複製代碼

解決新bug2

緣由：

• 切換輸入框後，js代碼將body滾動至底部，這是同步的。
• 切換輸入框後，webview會將新獲取焦點輸入框滾動至可視區域，這是異步的。
• bug1的解決方案將輸入框失去焦點的回調改爲異步，沒有解決bug2的問題,
  問題變成：在多個輸入框間切換輸入，webview因輸入框切換將獲取焦點輸入框滾動至可視區域，可是js代碼異步將頁面滾動至底部，有時致使新獲取焦點輸入框不在但是範圍。

解決： 在輸入框獲取和失去焦點時，clearTimeout

doms.forEach((item) => {
  item.onfocus = () => {
    // 元素獲取焦點時，由webview滾動元素至但是區域
    window.inputFocuseTimeout && clearTimeout(window.inputFocuseTimeout);
  };
  item.onblur = () => {
    window.inputFocuseTimeout && clearTimeout(window.inputFocuseTimeout);
    window.inputFocuseTimeout = setTimeout(scrollTop, 0);
  };
});
複製代碼

結語

菜鳥第一次寫東西，很脆弱的。因此有問題請留言問題，我積極修改。沒有問題，請留言鼓勵。