禁用 android 的 chrome 下拉刷新功能

Question

我为我的公司创建了一个小型 HTML5 Web 应用程序。

此应用程序显示项目列表，一切正常。

该应用程序主要用于 android 手机和 Chrome 作为浏览器。此外，该网站保存在主屏幕上，因此 Android 将整个事情作为一个应用程序进行管理（我猜是使用 WebView ）。

Chrome Beta（我认为还有 Android 系统 WebView）引入了“下拉刷新”功能（ 例如，请参见此链接）。

这是一个方便的功能，但我想知道是否可以使用某些元标记（或 javascript 东西）禁用它，因为用户在浏览列表时可以轻松触发刷新并重新加载整个应用程序。

这也是应用程序不需要的功能。

我知道此功能仅在 Chrome 测试版中可用，但我感觉它也将登陆稳定版应用程序。

谢谢！

编辑：我已经卸载了 Chrome Beta，固定到主屏幕的链接现在可以使用稳定的 Chrome 打开。所以固定链接以 Chrome 开始，而不是 webview。

编辑：今天（2015-03-19）下拉刷新已经来到稳定的chrome。

编辑：从@Evyn 的回答我点击 这个链接 并得到了这个有效的 javascript/jquery 代码。

 var lastTouchY = 0;
var preventPullToRefresh = false;

$('body').on('touchstart', function (e) {
    if (e.originalEvent.touches.length != 1) { return; }
    lastTouchY = e.originalEvent.touches[0].clientY;
    preventPullToRefresh = window.pageYOffset == 0;
});

$('body').on('touchmove', function (e) {
    var touchY = e.originalEvent.touches[0].clientY;
    var touchYDelta = touchY - lastTouchY;
    lastTouchY = touchY;
    if (preventPullToRefresh) {
        // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
        preventPullToRefresh = false;
        if (touchYDelta > 0) {
            e.preventDefault();
            return;
        }
    }
});

正如@bcintegrity 指出的那样，我希望将来有一个站点清单解决方案（和/或元标记）。

此外，欢迎对上述代码提出建议。

原文由 Sebastiano 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过执行以下任一操作，可以有效地阻止下拉刷新效果的默认操作：

1. preventDefault ‘ing 触摸序列的某些部分，包括以下任何一项（按破坏性最大到破坏性最小的顺序）：
   • 一种。整个触摸流（不理想）。
   • b.所有顶级滚动触摸动作。
   • C。第一个顶部滚动触摸。
   • d.仅当 1) 初始触摸启动发生在页面 y 滚动偏移量为零且 2) 触摸移动会导致顶部过度滚动时，第一个顶部过度滚动触摸移动。
2. 将“ touch-action: none ”应用于触摸目标元素，在适当的情况下，禁用触摸序列的默认操作（包括下拉刷新）。
3. 将“ overflow-y: hidden ”应用到 body 元素，必要时使用 div 作为可滚动内容。
4. 通过 chrome://flags/#disable-pull-to-refresh-effect 在本地禁用效果。

查看更多

原文由 Evyn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2019+的简单解决方案

Chrome 63 添加了一个 css 属性来帮助解决这个问题。通读 Google 的本指南， 了解如何处理它。

这是他们的 TL:DR

CSS overscroll-behavior 属性允许开发人员在到达内容的顶部/底部时覆盖浏览器的默认溢出滚动行为。用例包括禁用移动设备上的下拉刷新功能、移除过度滚动发光和橡皮筋效果，以及防止页面内容在模态/叠加层下方滚动。

要使其正常工作，您只需在 CSS 中添加以下内容：

 body {
  overscroll-behavior: contain;
}

它目前也只有 Chrome、Edge 和 Firefox 支持，但我相信 Safari 会很快添加它，因为它们似乎完全支持服务工作者和 PWA 的未来。

原文由 Matthew Mullin 发布，翻译遵循 CC BY-SA 4.0 许可协议