12

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

根据https://developers.google.com/web/updates/2017/11/overscroll-behavior，以下一行 css 应该可以解决问题..但是 pull-to-refresh 并且令人讨厌的用户体验仍然存在。有任何想法吗？

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

4 回答 4

8

我有同样的问题。我发现 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>
于 2018-07-04T14:49:07.820 回答
3

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

preventDefault()

不再禁用下拉刷新。

相反，您可以添加

{passive:false}

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

例如

window.addEventListener("touchstart", eventListener, {passive:false});
于 2019-07-26T07:25:14.093 回答
1

在 IOSpreventDefault();中较新版本的 chrome 中不再禁用拉刷新。对于最新的，您可以将 inobounce js cdn 添加到您想要禁用拉刷新的页面的标题中。这会变魔术。

<script src="https://cdnjs.cloudflare.com/ajax/libs/inobounce/0.2.0/inobounce.js"></script>
于 2020-01-25T05:06:55.407 回答
0

唯一对我有用的是iNoBounce。

示例反应片段：

import 'inobounce'

...

<div style={{
  height: windowHeight,
  WebkitOverflowScrolling: 'touch',
  overflowY: 'auto' }}
>Content goes here</div>
于 2019-08-11T23:25:41.733 回答