Chrome 75 and newer

Google has made pull-to-refresh mandatory with the update to version 75. You can not turn it off.

You can prevent accidental refreshes by scrolling up slowly.

If you own a website, you can still opt your website out of pull-to-refresh using the following CSS property.

Simple solution for 2019+ for site owners

Chrome 63 has added the overscroll-behaviour 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 website's 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.

Solution for Chrome 41 to 74

Open chrome://flags, search for disable-pull-to-refresh-effect, and tap on "Disable".

After many hours of trying, this solution works for me

$("html").css({
    "touch-action": "pan-down"
});

I use MooTools, and I have created a Class to disable refresh on a targeted element, but the crux of it is (native JS):

var target = window; // this can be any scrollable element
var last_y = 0;
target.addEventListener('touchmove', function(e){
    var scrolly = target.pageYOffset || target.scrollTop || 0;
    var direction = e.changedTouches[0].pageY > last_y ? 1 : -1;
    if(direction>0 && scrolly===0){
        e.preventDefault();
    }
    last_y = e.changedTouches[0].pageY;
});

All we do here is find the y direction of the touchmove, and if we are moving down the screen and the target scroll is 0, we stop the event. Thus, no refresh.

This means we are firing on every 'move', which can be expensive, but is the best solution I have found so far ...

You can try this

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

example :

https://ebidel.github.io/demos/chatbox.html

full doc https://developers.google.com/web/updates/2017/11/overscroll-behavior

AngularJS

I have successfully disabled it with this AngularJS directive:

//Prevents "pull to reload" behaviour in Chrome. Assign to child scrollable elements.
angular.module('hereApp.directive').directive('noPullToReload', function() {
    'use strict';

    return {
        link: function(scope, element) {
            var initialY = null,
                previousY = null,
                bindScrollEvent = function(e){
                    previousY = initialY = e.touches[0].clientY;

                    // Pull to reload won't be activated if the element is not initially at scrollTop === 0
                    if(element[0].scrollTop <= 0){
                        element.on("touchmove", blockScroll);
                    }
                },
                blockScroll = function(e){
                    if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
                        e.preventDefault();
                    }
                    else if(initialY >= e.touches[0].clientY){ //Scrolling down
                        //As soon as you scroll down, there is no risk of pulling to reload
                        element.off("touchmove", blockScroll);
                    }
                    previousY = e.touches[0].clientY;
                },
                unbindScrollEvent = function(e){
                    element.off("touchmove", blockScroll);
                };
            element.on("touchstart", bindScrollEvent);
            element.on("touchend", unbindScrollEvent);
        }
    };
});

It's safe to stop watching as soon as the user scrolls down, as the pull to refresh has no chance of being triggered.

Likewise, if scrolltop > 0, the event won't be triggered. In my implementation, I bind the touchmove event on touchstart, only if scrollTop <= 0. I unbind it as soon as the user scrolls down (initialY >= e.touches[0].clientY). If the user scrolls up (previousY < e.touches[0].clientY), then I call preventDefault().

This saves us from watching scroll events needlessly, yet blocks overscrolling.

jQuery

If you are using jQuery, this is the untested equivalent. element is a jQuery element:

var initialY = null,
    previousY = null,
    bindScrollEvent = function(e){
        previousY = initialY = e.touches[0].clientY;

        // Pull to reload won't be activated if the element is not initially at scrollTop === 0
        if(element[0].scrollTop <= 0){
            element.on("touchmove", blockScroll);
        }
    },
    blockScroll = function(e){
        if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
            e.preventDefault();
        }
        else if(initialY >= e.touches[0].clientY){ //Scrolling down
            //As soon as you scroll down, there is no risk of pulling to reload
            element.off("touchmove");
        }
        previousY = e.touches[0].clientY;
    },
    unbindScrollEvent = function(e){
        element.off("touchmove");
    };
element.on("touchstart", bindScrollEvent);
element.on("touchend", unbindScrollEvent);

Naturally, the same can also be achieved with pure JS.

Simple Javascript

I implemented using standard javascript. Simple and easy to implement. Just paste and it works fine.

<script type="text/javascript">         //<![CDATA[
     window.addEventListener('load', function() {
          var maybePreventPullToRefresh = false;
          var lastTouchY = 0;
          var touchstartHandler = function(e) {
            if (e.touches.length != 1) return;
            lastTouchY = e.touches[0].clientY;
            // Pull-to-refresh will only trigger if the scroll begins when the
            // document's Y offset is zero.
            maybePreventPullToRefresh =
                window.pageYOffset == 0;
          }

          var touchmoveHandler = function(e) {
            var touchY = e.touches[0].clientY;
            var touchYDelta = touchY - lastTouchY;
            lastTouchY = touchY;

            if (maybePreventPullToRefresh) {
              // To suppress pull-to-refresh it is sufficient to preventDefault the
              // first overscrolling touchmove.
              maybePreventPullToRefresh = false;
              if (touchYDelta > 0) {
                e.preventDefault();
                return;
              }
            }
          }

          document.addEventListener('touchstart', touchstartHandler, false);
          document.addEventListener('touchmove', touchmoveHandler, false);      });
            //]]>    </script>

The best solution on pure CSS:

body {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: -1px;
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}
#pseudobody {
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    z-index: 2;
    margin: 0;
    padding:0;
    overflow-y: auto;
}

See this demo: https://jsbin.com/pokusideha/quiet

I find setting your body CSS overflow-y:hidden is the simplest way. If you did want to have a scrolling application page you can just use a div container with scrolling features.

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');

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>

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);

I solved the pull-down-to-refresh problem with this:

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

The simple and recommended solution in 2023, as per the recommendations by Google and Mozilla, which works in both mobile browsers:

HTML {
    overscroll-behavior: none;
}
BODY {
    overscroll-behavior-y: contain;
}

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.

This worked for me:

html {
  overscroll-behavior-y: contain;
}

This is what I did using nextjs/react

useEffect(() => {
  
    function preventPullToRefresh() {
     var lastTouchY = 0;
     document.addEventListener(
      "touchstart",
      function (e) {
       if (e.touches.length !== 1) return;
       lastTouchY = e.touches[0].clientY;
      },
      {passive: false}
     );

     document.addEventListener(
      "touchmove",
      function (e) {
       var touchY = e.touches[0].clientY;
       var touchYDelta = touchY - lastTouchY;
       lastTouchY = touchY;
       if (touchYDelta > 0) {
        e.preventDefault();
        return;
       }
      },
      {passive: false}
     );
    }

    preventPullToRefresh();
  }, []);