点击 发送邮箱按钮 出现弹框 使用fixed定位,当输入邮箱,软键盘被拉起,输入完毕,键盘收起,ios机型会导致键盘弹起的时候 底层页面的高度向上推 键盘收起 高度没有回来 导致点击探层的确定按钮 元素错位。
解决方法 键盘收起时 底层高度回到顶部
在这里插入图片描述
2,弹框穿透
解决下层穿透问题
https://blog.youkuaiyun.com/etemal_bright/article/details/106634135
1,根本要脱离文档流
2,只使用overflow有些浏览器还是会不兼容
所以还是要结合定位 脱离文档流
思想:在弹框出来的时候给外层 或者 body添加样式或者class
组件内实现如下
watch: {
bShow (newVal) {
document.body.style = newVal ? 'overflow-y: hidden; padding-right: ’ + scrollBarWidth + ‘px; position: fixed; top: 0; left: 0; width: 100%; height: 100%;’ : ‘’;
document.body[newVal ? ‘addEventListener’ : ‘removeEventListener’](‘touchmove’, preventTouch, false);
document.documentElement[newVal ? ‘addEventListener’ : ‘removeEventListener’](‘touchmove’, preventTouch, false);
}
},
beforeDestroy () {
document.body.style = ‘’;
document.body.removeEventListener(‘touchmove’, preventTouch, false);
document.documentElement.removeEventListener(‘touchmove’, preventTouch, false);
},