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

Question

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 us

Answer 1

Note that overflow-y is not inherited, so you need to set it on ALL block elements.

You can do this with jQuery simply by:

        $(document.body).css('overflow-y', 'hidden'); 
        $('*').filter(function(index) {
            return $(this).css('display') == 'block';
        }).css('overflow-y', 'hidden');

Answer 2

What I did was add following to the touchstart and touchend/touchcancel events:

scrollTo(0, 1)

Since chrome does not scroll if it's not on scrollY position 0 this will prevent chrome from doing pull to refresh.

If it still does not work, try also doing that when the page loads.

Answer 3

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):
   • 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.
2. Applying “touch-action: none” to touch-targeted elements, where appropriate, disabling default actions (including pull-to-refresh) of the touch sequence.
3. Applying “overflow-y: hidden” to the body element, using a div for scrollable content if necessary.
4. Disabling the effect locally via chrome://flags/#disable-pull-to-refresh-effect).

See more

Answer 4

Since a couple of weeks I found out that the javascript function that I used to disable the Chrome refresh action won't work anymore. I have made this to solve it:

$(window).scroll(function() {
   if ($(document).scrollTop() >= 1) {
      $("html").css({
         "touch-action": "auto"}
      );
   } else {
      $("html").css({
         "touch-action": "pan-down"
      });
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 5

Pure js solution.

// Prevent pull refresh chrome
    var lastTouchY = 0;
    var preventPullToRefresh = false;
    window.document.body.addEventListener("touchstart", function(e){
        if (e.touches.length != 1) { return; }
        lastTouchY = e.touches[0].clientY;
        preventPullToRefresh = window.pageYOffset == 0;
    }, false);

    window.document.body.addEventListener("touchmove", function(e){

        var touchY = e.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;
            }
        }

    }, false);

Answer 6

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.