IOS键盘弹起页面自动上滚的解决办法

问题背景：

0. ios系统键盘弹起时，默认将页面顶起（最外层容器）
   • Tip：
     • 只有在输入框被认为会被遮挡时出现（预计输入框距离顶部30%即开始）
     • 页面顶起只是将输入框顶到键盘上方（不包括输入框下方区域）
     • 页面顶起后可滚动（最外层容器滚动，且无法阻止，除禁止touchmove默认事件）
1. 安卓没有该问题

方案：

说明：键盘弹起ios会将页面自动滚上去，那就手动将页面滚下来 + 垫高输入框

0. 手动将页面滚下来：

   // 聚焦时，IOS自动滚至底部，此处还原
   window.document.documentElement.scrollTop = xxx
   

1. 获取IOS键盘高度，之后v-if垫高输入框即可

   ​
   // 计算ios键盘高度
   const initVisualViewportHeight = window.visualViewport.height;
   ​
   // 监听visualViewport获取键盘高度
   const visualViewportListen = () => {
     if (checkIsIOS()) {
       // 计算ios键盘高度
       window.visualViewport.addEventListener('resize', () => {
         window.console.log('window.visualViewport.height', window.visualViewport.height);
         const newVisualViewportHeight = window.visualViewport.height;
         const MIN_DISTANCE = 10;
         if (Math.abs(newVisualViewportHeight - initVisualViewportHeight) > MIN_DISTANCE) {
           state.keyboardHeight = `${Math.abs(newVisualViewportHeight - initVisualViewportHeight)}px`;
         }
       });
     }
   };
   

2. 细节问题： -页面明显跳动：使用opacity + transition 掩盖

   // 透明度降为0（解决键盘弹窗页面跳动问题）
   document.querySelector('#wujieVue').style.opacity = 0;
   ​
   // 并css修改（opacity复原 + transition动画）
   transition: 'opacity 0.15s ease-out',
   opacity: 1,