Come impedire il pull-down-to-refresh del chrome mobile

Question

Voglio impedire il pull-down-to-refresh del chrome mobile (in particolare iOS chrome). La mia applicazione web ha eventi di panning verticali con viewport di larghezza del dispositivo e altezza del dispositivo, ma ogni volta che si esegue una panoramica, Chrome Chrome si aggiorna automaticamente a causa della funzione predefinita del browser. Inoltre, nel browser Safari, lo schermo scorre durante l'evento panning. Voglio disabilitare queste mosse.

Certo, ho provato event.preventDefault(); e touch-action: nessuno; Ma non sembra funzionare. Dovrei aggiungere eventListner e touch-action "su body tag"? Mi aspetto una risposta utile con l'esempio.

Answer 1

Dovresti vedere il seguente articolo di google. Risponde e fornisce una demo funzionante.

https://docs.google.com/document/d/12Ay4s3NWake8Qd6xQeGiYimGJ_gCe0UMDZKwP9Ni4m8/mobilebasic

Answer 2

Dal mobili Chrome> = 56 listener di eventi sono passivi per impostazione predefinita e listener di eventi passivi non può impedire più di default. See here

è necessario utilizzare i listener di eventi attivi, invece in questo modo:

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

Ecco un esempio di lavoro:

https://output.jsbin.com/niyukadizu/quiet

https://output.jsbin.com/niyukadizu

Answer 3

Prova questa.

body { 
    /* Disables pull-to-refresh but allows overscroll glow effects. */ 
    overscroll-behavior-y: contain; 
} 

Ha funzionato bene per me. Ho avuto strani problemi di scorrimento a causa di altri hack javascript. Leggi questo articolo per maggiori dettagli.

https://developers.google.com/web/updates/2017/11/overscroll-behavior