js 弹框底层穿透问题

阿奇是只猪

于 2020-06-11 16:43:41 发布

阅读量885

点赞数

CC 4.0 BY-SA版权

分类专栏： js 知识积累

本文链接：https://blog.youkuaiyun.com/etemal_bright/article/details/104552810

js 同时被 2 个专栏收录

12 篇文章

订阅专栏

知识积累

5 篇文章

订阅专栏

当在iOS设备上点击发送邮箱按钮弹出固定定位的弹框并输入邮箱时，软键盘升起后收起会导致底层页面元素错位。为了解决这个问题，可以在键盘收起时将底层高度恢复到顶部。弹框防止底层穿透的关键是使其脱离文档流，结合定位和overflow属性。通过监听弹框显示状态，动态调整body样式，添加overflow-y隐藏、固定定位等，并阻止触摸滚动事件，以确保在弹框出现和消失时正确处理页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

点击发送邮箱按钮出现弹框使用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);
},