修复iOS12/13微信浏览器软键盘收起后页面无法回滚的Bug

问题
在iOS12/13系统下使用微信浏览器时，当软键盘收起后，页面无法回滚，即页面无法向上滚动。

问题分析：
这个问题的根源在于iOS12/13系统的WebKit内核中存在一个Bug。当软键盘收起时，WebKit内核会将body元素的scrollTop属性重置为0，导致页面无法回滚。

解决方案：
为了修复这个问题，可以采用以下解决方案：

1. 在输入框上监听blur事件，事件触发后将body滚动至底部。

//获取body元素
let body = document.body;
// 获取所有的输入框
let inputs = document.querySelectorAll('input');
// 循环添加blur事件
inputs.forEach((input) => {
  input.addEventListener('blur', () => {
    body.scrollTop = body.scrollHeight;
  });
});

2. 切换输入框后，js代码将body滚动至底部，这是同步的。切换输入框后，webview会将新获取焦点输入框滚动至可视区域，这是异步的。问题变成：在多个输入框间切换输入，webview因输入框切换将获取焦点输入框滚动…

// 定义一个标志位，判断当前是否正在滚动
let isScrolling = false;

// 获取body元素
let body = document.body;

// 获取所有的输入框
let inputs = document.querySelectorAll('input');

// 循环添加focus事件
inputs.forEach((input) => {
  input.addEventListener('focus', () => {
    // 如果当前正在滚动，则不进行任何操作
    if (isScrolling) {
      return;
    }

    // 设置标志位，表示当前正在滚动
    isScrolling = true;

    // 将body滚动至底部
    body.scrollTop = body.scrollHeight;

    // 等待webview滚动到可视区域
    setTimeout(() => {
      // 设置标志位，表示当前滚动已完成
      isScrolling = false;
    }, 100);
  });
});

3. 使用第三方库来修复这个问题。例如，可以使用jQuery的scrollTo插件来滚动页面。

// 导入jQuery库
import $ from 'jquery';

// 获取body元素
let body = document.body;

// 获取所有的输入框
let inputs = document.querySelectorAll('input');

// 循环添加focus事件
inputs.forEach((input) => {
  input.addEventListener('focus', () => {
    // 将body滚动至底部
    $(body).scrollTo('100%', 100);
  });
});

总结：
以上就是修复iOS12/13微信浏览器软键盘收起后页面无法回滚的Bug的解决方案。希望本文能对您有所帮助。