Question

我正在我的网站上实现绘图应用，并尝试在用户绘制画布时防止过度滚动。尽管尝试了几种报告的解决方案，但我无法禁用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>

Answer 1

我有同样的问题。我发现CSS属性仅适用于chrome-android。
最后，我通过以下操作成功阻止了chrome-ios上的“强制刷新”：

<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>

Answer 2

对于较新版本的chrome （我已在IOS上v75.0.3770.103进行了测试），preventDefault（）不再禁用“拉动刷新”功能。代替，您可以在事件监听器中添加 {passive：false} 作为附加选项。

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

Answer 3

唯一对我有用的是iNoBounce。

React代码段示例：

import 'inobounce'

...

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

Answer 4

在IOS preventDefault();中较新版本的chrome中，不再禁用拉刷新功能。最近，您可以将inobounce js cdn添加到要禁用拉动刷新的页面的页眉中。这会神奇。

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

禁用Chrome在iPhone上的即时刷新功能

4 个答案: