androidhtmlgoogle-chromemeta-tags

Disabling android's chrome pull-down-to-refresh feature


I've created a small HTML5 web application for my company.

This application displays a list of items and everything works fine.

The application is mainly used on android phones and Chrome as browser. Also, the site is saved on the home screen so Android manage the whole thing as an app (using a WebView I guess).

Chrome Beta (and I think also the Android System WebView) has introduced a "pull down to refresh" feature (See this link for example).

This is an handy feature but I was wondering if it can be disabled with some meta tag (or javascript stuff) because the refresh can be easily triggered by the user while navigating the list and the whole app is reloaded.

Also this is a feature not needed by the application.

I know that this feature is still available only in Chrome beta, but I have the sensation that this is landing on the stable app, too.

Thank you!

Edit: I've uninstalled Chrome Beta and the link pinned to the home screen now opens with the stable Chrome. So the pinned links starts with Chrome and not with a webview.

Edit: today (2015-03-19) the pull-down-to-refresh has come to the stable chrome.

Edit: from @Evyn answer I follow this link and got this javascript/jquery code that work.

var lastTouchY = 0;
var preventPullToRefresh = false;

$('body').on('touchstart', function (e) {
    if (e.originalEvent.touches.length != 1) { return; }
    lastTouchY = e.originalEvent.touches[0].clientY;
    preventPullToRefresh = window.pageYOffset == 0;
});

$('body').on('touchmove', function (e) {
    var touchY = e.originalEvent.touches[0].clientY;
    var touchYDelta = touchY - lastTouchY;
    lastTouchY = touchY;
    if (preventPullToRefresh) {
        // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
        preventPullToRefresh = false;
        if (touchYDelta > 0) {
            e.preventDefault();
            return;
        }
    }
});

As @bcintegrity pointed out, I hope for a site manifest solution (and/or a meta-tag) in the future.

Moreover suggestions for the code above are welcome.


Solution

  • Google has made pull-to-refresh mandatory. Since Chrome version 75, you can not turn it off.

    What you can do to avoid unwanted refreshes is scrolling up slowly and looking at the scroll bar so you can stop scrolling in time before hitting the top of the page.

    However, you can opt your own website out of pull-to-refresh.

    The default action of the pull-to-refresh effect can be effectively prevented by doing any of the following :

    1. preventDefault’ing some portion of the touch sequence, including any of the following (in order of most disruptive to least disruptive):
    1. Applying “touch-action: none” to touch-targeted elements, where appropriate, disabling default actions (including pull-to-refresh) of the touch sequence.
    2. Applying “overflow-y: hidden” to the body element, using a div for scrollable content if necessary.
    3. Disabling the effect locally via chrome://flags/#disable-pull-to-refresh-effect). Only available in Chrome 41 to 74. Removed in Chrome 75.

    See more