h5在ios小程序中fixed滑动遮挡(回弹机制)

在iOS11及以上版本的微信浏览器中,使用position: fixed的元素在长按时会遇到被遮挡的问题,这与浏览器的回弹机制有关。引入inobounce.js可以监听手指事件并尝试解决这个问题,但在某些情况下仍可能出现问题。解决思路是通过动态切换absolute和fixed布局来应对。
摘要由CSDN通过智能技术生成

场景:position:fixed显示没啥问题,但手机长按后滑动上移动出现了按钮被遮挡的情况,放开后自动好了(ios11版本以上才出现的,安卓机不会,微信浏览器的回弹机制)

image.png

解决思路:可以通过判断来回切换absoulte和fixed布局来控制次按钮。但我这里还是会出现,原因是h5在ios浏览器中会出现回弹机制(inobounce.js) 。

引入inobounce.js或者npm安装(原理监听手指事件,设置固定),vue中使用:

注意:文档中强调要配置scroll

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值