如何防止移动铬的下拉刷新 [英] 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（）;和触摸动作：无;但它看起来不起作用。我应该在body标签上添加eventListner和touch-action吗？我希望通过示例获得有用的答案。

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：

For latest versions of 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});

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