ios12系统的微信浏览器在软键盘收起时，页面无法回滚的bug修复

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);
  };
});
复制代码

结语

菜鸟第一次写东西，很脆弱的。所以有问题请留言问题，我积极修改。没有问题，请留言鼓励。

转载于:https://juejin.im/post/5ccf81d66fb9a03234165b85