CODEWITHSUNDEEP
javascriptioscssmobile
Jae Woo Woo
Jae Woo Woo

Reputation: 1041

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

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.

Upvotes: 57

Views: 49405

Answers (6)

Thomas James Thorstensson
Thomas James Thorstensson

Reputation: 313

a few years late to this one but this works

<style>
html {
  overflow: hidden;
  overscroll-behavior: none;
}
</style>

Peace,

Upvotes: 0

David Spence
David Spence

Reputation: 8079

For iOS I did the following for a single html page which expands to the size of the viewport. This solution doesn't allow any scrolling at all (which may not suit everyone, but worked well for me).

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

body {
  overflow: hidden;
}

Upvotes: 4

Masum Billah
Masum Billah

Reputation: 2399

Scroll behavior none works for me like this.

body {
    overscroll-behavior: none 
}

Upvotes: 10

Joshua Ott
Joshua Ott

Reputation: 1223

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

Upvotes: 62

Ruben Vreeken
Ruben Vreeken

Reputation: 976

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

    }
})();

Upvotes: 6

Gaurav Saluja
Gaurav Saluja

Reputation: 713

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

Upvotes: 18

Related Questions