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.

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