如何防止手机chrome下拉刷新 [英] How to prevent pull-down-to-refresh of mobile chrome

问题描述

我想防止下拉刷新移动 chrome(尤其是 iOS chrome).我的 Web 应用程序具有带有设备宽度和设备高度视口的垂直平移事件，但是每当向下平移时，由于浏览器的默认功能，移动 chrome 都会自行刷新.另外，在 Safari 浏览器上，屏幕在平移事件期间滚动.我想禁用这些动作.

I want to prevent pull-down-to-refresh of mobile chrome(especially iOS chrome). My web application has vertical panning event with device-width and device-height viewport, but whenever panning down, mobile chrome refreshes itself because of browser's default function. Plus, on Safari browser, screen is rolling during panning event. I want to disable these moves.

当然，我试过 event.preventDefault();和触摸动作:无；但它看起来不起作用.我应该在身体标签上"添加 eventListner 和触摸动作吗?我希望通过示例得到有用的答案.

Of course, I tried event.preventDefault(); and touch-action: none; But it doesn't look work. Should I add eventListner and touch-action "on body tag"? I expect useful answer with example.

推荐答案

对于最新版本的 Chrome:

html,
body {
    overscroll-behavior-y: contain;
}

旧解决方案:

由于移动 Chrome >= 56 个事件侦听器默认是被动的，并且被动事件侦听器无法再阻止默认​​设置.见这里您必须像这样使用活动事件侦听器:

Since mobile Chrome >= 56 event listeners are passive by default and passive event listeners can't prevent defaults anymore. See here You have to use active event listeners instead like so:

document.addEventListener('touchstart', touchstartHandler, {passive: false});
document.addEventListener('touchmove', touchmoveHandler, {passive: false});

这篇关于如何防止手机chrome下拉刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！