华为浏览器的默认滑动行为是基于内核实现的,很难彻底屏蔽或禁用。不过可以通过一些技巧来实现在滑动页面时不触发华为浏览器默认滑动,具体方法如下:
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();
}
需要注意的是,以上方法并不能完全禁用华为浏览器的默认滑动效果,但可以在一定程度上减少其影响。建议根据具体情况选择最合适的方法。