解决蒙层底部页面跟随滑动

在前端开发中,当页面弹窗出现且底部页面高度超出视窗时,底部页面会随滑动而滚动。解决这个问题的方法包括:1) 利用CSS的fixed定位,记录并调整页面位置;2) 监听touchmove事件并阻止其默认行为。在Vue.js中,可以在蒙层组件上直接使用@touchmove.prevent来阻止移动端的页面滚动。
摘要由CSDN通过智能技术生成

场景:

我们在开发中经常会遇见这样的场景,页面弹窗后滑动,当底部页面实际高度超出视窗高度时蒙层后的底部页面也会跟随滑动

解决

1、原理:在点击触发弹窗的位置,将页面的position变为fixed,因为页面变为fixed会自动回退到顶部,所以需要记录一下当前距顶部的距离并滚动,当关闭弹窗后再将距离复原。

let bodyEl = document.body;
let scrollTop = 0;
function lockPage(ifLock){
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值