web-dev-qa-db-ja.com

iPhoneでChromeのプルトゥリフレッシュを無効にする

私は自分のサイトに描画アプリを実装し、ユーザーがキャンバスに描画している間のオーバースクロールを防止しようとしています。報告されているいくつかの解決策を試しても、Chromeのプルトゥリフレッシュを無効にすることはできません。

https://developers.google.com/web/updates/2017/11/overscroll-behavior によると、次のcssの1行でトリックを実行できます。yetpull-to-refresh and煩わしいユーザーエクスペリエンス 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>
pull-to-refreshchrome-ios
10
user3621913

私も同じ問題を抱えていました。 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>
9
Derek Fan

新しいバージョンのchrome （v75.0.3770.103でテストしました）のIOSでは、preventDefault（）はpull-to-refreshを無効にしなくなりました。代わりに、追加のオプションとして{passive：false}をイベントリスナーに追加します。

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

2
Edwind Tan

chrome in IOS preventDefault();の新しいバージョンでは、pull to refreshが無効になりません。最新の場合は、inobounce js cdnを追加するだけですプルリフレッシュを無効にするページのヘッダーに追加します。

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

私のために働いた唯一のものは iNoBounce でした。

例React snippet：

import 'inobounce'

...

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