12

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>
user3621913
  • 121
  • 1
  • 1
  • 4

4 Answers4

8

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>
Derek Fan
  • 817
  • 11
  • 10
  • @lehi_net what version of Chrome are you using for ios? I can't get this to work with ios chrome version 69.0.3497.105 – Jonathan002 Oct 05 '18 at 09:17
  • @Jonathan002 Chrome 69.0.3497.105, as you have. I used this function for div#app - the root element inside – lehi_net Oct 05 '18 at 15:02
  • 3
    @lehi_net, Thanks for clarifying for me lehi. I had trouble wondering why this wasn't working for me, and realized that the project I am working on had used a cdn to automatically convert all my events to be passive to improve performance. https://unpkg.com/default-passive-events. After commenting it out and testing it, it now works fine for me. :) – Jonathan002 Oct 06 '18 at 10:44
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});
Vega
  • 27,856
  • 27
  • 95
  • 103
Edwind Tan
  • 31
  • 3
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>
rohithr
  • 19
  • 4
0

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>
roman
  • 537
  • 2
  • 5