Disabling android's chrome pull-down-to-refresh feature
The default action of the pull-to-refresh effect can be effectively prevented by doing any of the following :
preventDefault’ing some portion of the touch sequence, including any of the following (in order of most disruptive to least disruptive):- a. The entire touch stream (not ideal).
- b. All top overscrolling touchmoves.
- c. The first top overscrolling touchmove.
- d. The first top overscrolling touchmove only when 1) the initial touchstart occurred when the page y scroll offset was zero and 2) the touchmove would induce top overscroll.
- Applying “
touch-action: none” to touch-targeted elements, where appropriate, disabling default actions (including pull-to-refresh) of the touch sequence. - Applying “
overflow-y: hidden” to the body element, using a div for scrollable content if necessary. - Disabling the effect locally via
chrome://flags/#disable-pull-to-refresh-effect).
See more
Simple solution for 2019+
Chrome 63 has added a css property to help out with exactly this. Have a read through this guide by Google to get a good idea of how you can handle it.
Here is their TL:DR
The CSS overscroll-behavior property allows developers to override the browser's default overflow scroll behavior when reaching the top/bottom of content. Use cases include disabling the pull-to-refresh feature on mobile, removing overscroll glow and rubberbanding effects, and preventing page content from scrolling when it's beneath a modal/overlay.
To get it working, all you have to add is this in your CSS:
body {
overscroll-behavior: contain;
}
It is also only supported by Chrome, Edge and Firefox for now but I'm sure Safari will add it soon as they seem to be fully onboard with service workers and the future of PWA's.
At the moment you can only disable this feature via chrome://flags/#disable-pull-to-refresh-effect - open directly from your device.
You could try to catch touchmove events, but chances are very slim to achieve an acceptable result.