H5当弹出弹窗遮罩时如何阻止滚动穿透(使用css方式)
2024-08-28 01:50:41
最近的一个H5活动中有一个是点击[分享]弹窗指引遮罩弹窗引导用户进行分享,但突然发现弹出弹窗的时候下层仍然可以进行滑动,这个问题是个H5经久不衰讨论的问题,重点是我这个页面在安卓系统上有明显的滑动闪烁问题,所以不得不进行解决,具体导致闪烁问题待排查,这里是使用了规避方法,即当弹出弹窗的时候固定弹窗,参考:https://juejin.im/post/5c4974f0518825260c5d1851
这里先记录最终解决方案,是使用当弹窗出现的时候将页面body的position设置为fixed并记录此刻滚动的位置,弹窗消失去除position属性
点击[分享好友]:
onInviteFriendClick() {
this.viewState.shareCover.visible = true; //遮罩出现不可以滚动
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;';
}
点击使遮罩消失
onVisibleClick = () => {
const oldVisible = this.viewState.shareCover.visible;
Object.assign(this.viewState, {
shareCover: {
visible: !oldVisible
}
}); //去除遮罩恢复滚动
if (!this.viewState.shareCover.visible) {
let body = document.body;
body.style.position = '';
let top = body.style.top;
document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
body.style.top = '';
}
};
可以看到上面的解决方案是控制底层的css来解决这个问题,我在这之前尝试使用js的方式阻止滚动,但是这个removeEventListener之后我的手机(ios)系统阻尼效果严重,时间关系放弃了改解决方案,参考:https://blog.csdn.net/qq_40513881/article/details/87190511
最新文章
- 19. UIAlertController 提示框获取文本内容,打印控制台上
- PHOTOSHOP(PS)快捷键大全
- 微信H5手指滑动屏蔽微信的默认效果
- C++ 顺序容器
- 关于移动端click事件绑定的一个细节
- POJ3922 A simple stone game
- 《SDN核心技术剖析和实战指南》3.3读书笔记
- 网络NSURLSession
- ThinkPHP中的__initialize()和类的构造函数__construct()
- List Set Map用法和区别
- svn地址如何更改
- RobotFramework自动化测试框架的基础关键字(三)
- Zookeeper vs etcd vs Consul
- 4.2模拟赛 wormhole(期望DP Dijkstra)
- GMap获取可视范围内四个角的坐标
- Spring事务嵌套
- 阶段01Java基础day16集合框架02
- CF848E Days of Floral Colours——DP+多项式求逆/分治NTT
- java 字符串截取的几种方式(转)
- python 首次安装 报错