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

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


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 hereYou have to use active event listeners instead like so:

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


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


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