ios12系統的微信瀏覽器在軟鍵盤收起時，頁面無法回滾的bug修復

萍萍發表於2019-05-06
iOS瀏覽器

bug如題，圖片如下：

ios12系統的微信瀏覽器在軟鍵盤收起時，頁面無法回滾的bug修復

有bug的解決方案

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

// el是輸入框
el.onblur = () => {
    window.document.body.scrollTop = window.document.body.scrollHeight;
};
複製程式碼

新寫了兩bug

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

解決新bug1

原因：

  • 輸入框blur事件發生在其他事件之前
  • 事件回撥是同步執行
  • 頁面滾動了，導致頁面的point點座標不在“提交留言”按鈕的位置
  • 無法觸發“提交留言”按鈕的點選事件

解決：

// el是輸入框
el.onblur = () => {
    setTimeout(() => {
        window.document.body.scrollTop = window.document.body.scrollHeight;
    }, 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(() => {
      window.document.body.scrollTop = window.document.body.scrollHeight;
    }, 0);
  };
});
複製程式碼

結語

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

相關文章