h5页面如何滑动页面不触发华为浏览器默认滑动

华为浏览器的默认滑动行为是基于内核实现的,很难彻底屏蔽或禁用。不过可以通过一些技巧来实现在滑动页面时不触发华为浏览器默认滑动,具体方法如下:

1、触摸事件取消默认行为

javascript
document.addEventListener('touchstart', function(e) {
  e.preventDefault();
}, {passive: false});

document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, {passive: false});

2、CSS 属性 overscroll-behavior

该属性可以控制元素在滚动到边缘时的行为,配合 scroll 和 touch-action 使用,可以实现一定程度上的屏蔽滑动效果。

css
body {
  overscroll-behavior: none;
  touch-action: pan-y;
}

3、使用 JavaScript 实现平滑滚动

可以使用 requestAnimationFrame 等函数实现平滑的滚动效果,避免出现突兀的滑动。同时加上 preventDefault 可以避免触发华为浏览器的默认滑动。

javascript
const targetElement = document.querySelector('#target');
let startY, endY;

targetElement.addEventListener('touchstart', function(e) {
  startY = e.touches[0].clientY;
});

targetElement.addEventListener('touchmove', function(e) {
  endY = e.touches[0].clientY;
  requestAnimationFrame(scrollTo);
}, {passive: false});

function scrollTo() {
  window.scrollTo(0, endY - startY);
  event.preventDefault();
}

需要注意的是,以上方法并不能完全禁用华为浏览器的默认滑动效果,但可以在一定程度上减少其影响。建议根据具体情况选择最合适的方法。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值