Disable Chrome's pull-to-refresh on iPhone

Question

Disable Chrome's pull-to-refresh on iPhone

14.4k Views Asked by user3621913 At 10 April 2025 at 19:14

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>

Original Q&A

There are 4 best solutions below

**rohithr** · Answer 1

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>

**Derek Fan** · Answer 2

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** · Answer 3

For newer version of Chrome v75.0.3770.103 on IOS

preventDefault()

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

**roman** · Answer 4

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>

Disable Chrome's pull-to-refresh on iPhone

There are 4 best solutions below

Related Questions in PULL-TO-REFRESH

Related Questions in CHROME-IOS

Trending Questions

Popular # Hahtags

Popular Questions