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

user_5192200 0
Viewed 38149

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.

mobile css javascript ios
5 Answers
user_73009760

Scroll behavior none works for me like this.

body {
    overscroll-behavior: none 
}
user_18001490

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

    }
})();
user_9406610

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%;
    position: fixed;
    overflow: hidden;
}
user_6091760
Related