web-dev-qa-db-fra.com

Désactiver le pull-to-refresh de Chrome sur iPhone

J'implémente une application de dessin sur mon site et j'essaie d'empêcher le défilement excessif pendant que l'utilisateur dessine sur la toile. Malgré plusieurs solutions signalées, je ne peux pas désactiver le pull-to-refresh de Chrome.

Selon https://developers.google.com/web/updates/2017/11/overscroll-behavior , la ligne suivante de css devrait faire l'affaire. une expérience utilisateur ennuyeuse persiste . Des idées?

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

J'ai eu le même problème. J'ai trouvé que la propriété CSS ne fonctionne que sur Chrome-Android.
Enfin, j'ai réussi à empêcher le pull-to-refresh sur chrome-ios via les éléments suivants:

<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

Pour une version plus récente de chrome (J'ai testé sur v75.0.3770.103) sur IOS, preventDefault () ne désactive plus le pull-to-refresh. Au lieu de cela, vous pouvez ajoutez {passive: false} comme option supplémentaire dans l'écouteur d'événements.

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

2
Edwind Tan

Dans une version plus récente de chrome in IOS preventDefault(); ne désactive plus la traction pour rafraîchir. Pour la dernière, vous pouvez simplement ajouter inobounce js cdn à votre en-tête de la page que vous souhaitez désactiver pull to refresh. Cela fera la magie.

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

La seule chose qui a fonctionné pour moi était iNoBounce .

Exemple React snippet:

import 'inobounce'

...

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