Disable Chrome's pull-to-refresh on iPhone

Question

I am implementing a drawing app on my site and trying to prevent overscroll while the user draws on the canvas. Despite trying several reported solutions, I cannot disable C

Answer 1

The only thing that worked for me was iNoBounce.

Example React snippet:

import 'inobounce'

...

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

Answer 2

In newer version of chrome in IOS preventDefault(); is no longer disables pull to refresh. For latest, you can just add inobounce js cdn to your header of the page you want to disable pull to refresh. This will do the magic.

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

Answer 3

For newer version of chrome (I tested on v75.0.3770.103) on IOS, preventDefault() no longer disable pull-to-refresh. Instead, you can add in {passive:false} as additional option into the event listener.

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

Answer 4

I had the same problem. I found that CSS property only works on chrome-android.
Finally, I successfully prevent pull-to-refresh on chrome-ios through the following:

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