刘海屏ios的微信和qq内弹框顶起页面错乱

2020年04月10左右产生和开始解决，

一、以下解决不好的两个点在于：
1、缺少对于ios是否带有刘海屏的判断
2、未有好的位置移除监听
3、可能会导致其他bug，有可能会导致最后一个框不能在点击上一个框后直接点击
不确定的点在于：
1、以下代码所放的位置，目前在main.js，不知道是否有更好的地方用来放置这段代码

// 带有刘海屏的ios的qq及微信打开h5游戏链接，页面被顶起导致点击交互无响应（页面错位）
if (window.os === ‘ios’ && (window.RuntimeEnvironment === ‘weixin’ || window.RuntimeEnvironment === ‘qq’)) {
// 避免重复addEventListener
if (document.body.handleIosWxQq) document.body.removeEventListener(‘focusout’, document.body.handleIosWxQq)
document.body.addEventListener(‘focusout’, function handleIosWxQq () { // 软键盘收起的事件处理
try {
let currentPosition, timer
let speed = 1
timer = setInterval(function () {
currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition -= speed
window.scrollTo(0, currentPosition) // 页面向上滚动
currentPosition += speed
window.scrollTo(0, currentPosition) // 页面向下滚动
clearInterval(timer)
}, 100)
} catch (error) {
console.log(error)
}
})
}

二、这是两一种方式，vue_ios_postion_fix，当 input 调起 ios 微信 H5端软键盘的时候，fixed 定位元素会产生错位，修复这个问题的 Vue 插件

// 引入
import postionFix from ‘vue_ios_fixed_postion_bug_fix’
Vue.use(postionFix)
// input 标签添加 “v-pos_fix”

postionFix.js:

const postionFix = {}

postionFix.install = function (Vue, options) {
let postionFixTimeHandle = null

Vue.directive('postion_fix', {<br />            bind: _function_ (_el_) {<br />            el.addEventListener('blur', _function_ () {<br />                postionFixTimeHandle = setTimeout(_function_ () {<br />                    scroll()<br />                }, 200)<br />            })<br />            el.addEventListener('focus', _function_ () {<br />                    clearTimeout(postionFixTimeHandle)<br />            })<br />}<br />})<br />}

function scroll () {
if (document.activeElement === document.body) {
const h = document.body.scrollTop || document.documentElement.scrollTop
window.scrollTo(0, h + 1)
}
}

export default postionFix