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

结语

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