在 iPhone 上禁用 Chrome 的下拉刷新答案

【问题标题】：Disable Chrome's pull-to-refresh on iPhone在 iPhone 上禁用 Chrome 的下拉刷新
【发布时间】：2018-11-18 16:50:54
【问题描述】：

我正在我的网站上实现一个绘图应用程序，并试图在用户在画布上绘图时防止过度滚动。尽管尝试了几种报告的解决方案，但我无法禁用 Chrome 的下拉刷新。

根据https://developers.google.com/web/updates/2017/11/overscroll-behavior 的说法，下面一行css 应该可以解决问题..然而拉动刷新和烦人的用户体验persists。有什么想法吗？

<!DOCTYPE html>
<html>
<style type="text/css">
body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}
</style>

<body>
<h1>Simple Site</h1>
</body>

<script type="text/javascript">
</script>

</html>

【问题讨论】：

值得在 bugs.chromium.org/p/chromium/issues/… 向 chrome 团队提交错误
可以用“none”吗？ developers.google.com/web/updates/2017/11/overscroll-behavior

标签： pull-to-refresh chrome-ios

【解决方案1】：

适用于 IOS 上较新版本的 Chrome v75.0.3770.103

preventDefault()

不再禁用下拉刷新。

相反，您可以添加

{passive:false}

作为事件监听器的附加选项。

例如

window.addEventListener("touchstart", eventListener, {passive:false});

【讨论】：

这适用于最新的 iPhone，但也需要 preventDefault()。谢谢！
这会禁用页面的整个滚动

【解决方案2】：

在 IOS 的新版 chrome 中 preventDefault(); 不再禁用拉取刷新。对于最新的，您可以将 inobounce js cdn 添加到您想要禁用拉刷新的页面的标题中。这会很神奇。

<script src="https://cdnjs.cloudflare.com/ajax/libs/inobounce/0.2.0/inobounce.js"></script>

【讨论】：

【解决方案3】：

唯一对我有用的是iNoBounce。

示例反应 sn-p：

import 'inobounce'

...

<div style={{
  height: windowHeight,
  WebkitOverflowScrolling: 'touch',
  overflowY: 'auto' }}
>Content goes here</div>

【讨论】：

【解决方案4】：

我遇到了同样的问题。我发现 CSS 属性只适用于 chrome-android。
最后，我通过以下方法成功阻止了 chrome-ios 上的 pull-to-refresh：

<script>
  function preventPullToRefresh(element) {
    var prevent = false;

    document.querySelector(element).addEventListener('touchstart', function(e){
      if (e.touches.length !== 1) { return; }

      var scrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
      prevent = (scrollY === 0);
    });

    document.querySelector(element).addEventListener('touchmove', function(e){
      if (prevent) {
        prevent = false;
        e.preventDefault();
      }
    });
  }

  preventPullToRefresh('#id') // pass #id or html tag into the method
</script>

【讨论】：

@lehi_net 你在 ios 上使用什么版本的 Chrome？我无法让它与 ios chrome 版本 69.0.3497.105 一起使用
@Jonathan002 Chrome 69.0.3497.105，就像你一样。我将此函数用于 div#app - 中的根元素
@lehi_net，感谢您为我澄清 lehi。我不知道为什么这对我不起作用，并意识到我正在从事的项目使用 cdn 自动将我的所有事件转换为被动事件以提高性能。 unpkg.com/default-passive-events。在将其注释掉并对其进行测试后，它现在对我来说很好用。 :)