阻止拖拽滑动哪些事(主要是移动端)

本文介绍了移动端弹窗场景中出现的滚动穿透问题及其解决方法。首先通过设置body和html的overflow属性为hidden来阻止页面滚动,其次利用position:fixed进一步确保在移动端的适配性。

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

也就是所谓的移动端滚动穿透问题
一、body{ overflow:hidden }。一般PC端这样就行了,但在移动端可就不行了,因为他有touchmove。
二、可以阻止弹层的touchmove事件,但如果你的弹层内的内容需要滑动,这种方法pass
三、后来找到一个比较简单粗暴的方法

bodyhtml {
    overflow: hidden; // 适用PC端模拟时的鼠标滚轮,防不懂事的测试或产品找茬
    position: fixed;
    width: 100%;
    top: 0;
}
// top值可以用js获取你当前的scrolltop
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值