Disable Chrome's pull-to-refresh on iPhone

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 Chrome's pull-to-refresh.

According to https://developers.google.com/web/updates/2017/11/overscroll-behavior, the following one line of css should do the trick..yet pull-to-refresh and an annoying user experience persists. Any ideas?

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

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>

Edwind Tan

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});

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>

来源：https://stackoverflow.com/questions/50763813/disable-chromes-pull-to-refresh-on-iphone

标签

pull-to-refresh

chrome-ios