How to prevent pull-down-to-refresh of mobile chrome

Question

I want to prevent pull-down-to-refresh of mobile chrome(especially iOS chrome). My web application has vertical panning event with device-width and device-height viewport, but whenever panning down, mobile chrome refreshes itself because of browser's default function. Plus, on Safari browser, screen is rolling during panning event. I want to disable these moves.

Of course, I tried event.preventDefault(); and touch-action: none; But it doesn't look work. Should I add eventListner and touch-action "on body tag"? I expect useful answer with example.

Solution 1

For latest versions of Chrome:

html,
body {
    overscroll-behavior-y: contain;
}

Old solution:

Since mobile Chrome >= 56 event listeners are passive by default and passive event listeners can't prevent defaults anymore. See here You have to use active event listeners instead like so:

document.addEventListener('touchstart', touchstartHandler, {passive: false});
document.addEventListener('touchmove', touchmoveHandler, {passive: false});

Solution 2

Try this.

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

It worked well for me. I had weird scrolling issues due to other javascript hacks. Read this article for more details.

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

Solution 3

Scroll behavior none works for me like this.

body {
    overscroll-behavior: none 
}

Solution 4

The css-only answers posted here did not work for me. I ended up doing the following:

(function() {
    var touchStartHandler,
        touchMoveHandler,
        touchPoint;

    // Only needed for touch events on chrome.
    if ((window.chrome || navigator.userAgent.match("CriOS"))
        && "ontouchstart" in document.documentElement) {

        touchStartHandler = function() {
            // Only need to handle single-touch cases
            touchPoint = event.touches.length === 1 ? event.touches[0].clientY : null;
        };

        touchMoveHandler = function(event) {
            var newTouchPoint;

            // Only need to handle single-touch cases
            if (event.touches.length !== 1) {
                touchPoint = null;

                return;
            }

            // We only need to defaultPrevent when scrolling up
            newTouchPoint = event.touches[0].clientY;
            if (newTouchPoint > touchPoint) {
                event.preventDefault();
            }
            touchPoint = newTouchPoint;
        };

        document.addEventListener("touchstart", touchStartHandler, {
            passive: false
        });

        document.addEventListener("touchmove", touchMoveHandler, {
            passive: false
        });

    }
})();

View more solutions

Comments

[Joshua Ott]

Yeah the hack I've posted doesn't seem to work anymore. This here works perfectly fine!

[gman]

Wow, broke a ton of sites but yea, I see why they chose it. Thanks!

[Fky]

This work only on Chrome Android , not for Chrome IOs

[amirhe]

forum.framework7.io/t/…

[JRichardsz]

Worked on these android browsers: opera and chrome