How to disable pull-to-refresh rubber band effect

I have a “content” element with scroll=“false” attribute. Scrolling is disabled as expected but when dragging an element around the page, the view will sometimes exhibit the “rubber band” effect that I generally associate with “pull-to-refresh”.

I’ve noticed that his only seems to happen on the iPhone and I’m wondering if there is some way to disable or avoid this behavior.

The app is not currently fullscreen although we are planning on making it so eventually.

I’ve found the proper way to to this for Cordova based projects. Most likely you’ll want to edit www/config.xml and add the following line:

<!-- diables the fullscreen verticle rubberband effect on ios -->
<preference name="DisallowOverscroll" value="true"/>

If you’re using Appgyver Steroids for your project, you should add the line above to www/config.ios.xml


Note: I had previously posted a solution that relied on preventing the default behavior on touchmove events, something like:

DO NOT USE THIS CODE. CODE BELOW IS BAD

document.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false)

Using this will certainly disable the full page rubber band on your device but it will also remove the scroll behavior from all of your content and scroll areas.

Thanks, @gavares. Maybe @max will want to take a look soon…

@max already knows it :slight_smile:

1 Like

Thank you, @xAlien95!