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