Zapobieganie odświeżaniu/odświeżaniu mobilnego chrome

Question

Chcę zapobiec odświeżaniu/odświeżaniu mobilnego chrome (zwłaszcza iOS chrome). Moja aplikacja internetowa ma pionowe panoramowanie z widokiem szerokości urządzenia i wysokości urządzenia, ale za każdym razem, gdy przesuwa się w dół, Chrome mobilny odświeża się z powodu domyślnej funkcji przeglądarki. Dodatkowo, w przeglądarce Safari, ekran toczy się podczas zdarzenia panoramowania. Chcę wyłączyć te ruchy.

Oczywiście, wypróbowałem event.preventDefault(); i dotykowy: brak; Ale to nie wygląda na pracę. Czy powinienem dodać eventListner i akcję dotykową "na body tag"? Oczekuję użytecznej odpowiedzi z przykładem.

Answer 1

Powinieneś zobaczyć następujący artykuł google. Odpowiada i zapewnia działające demo.

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

Answer 2

Ponieważ mobilny Chrome> = 56 detektory zdarzeń są pasywne domyślnie i detektorów zdarzeń pasywnych nie może zapobiec domyślne więcej. See here

Trzeba użyć aktywne detektory zdarzeń zamiast tak:

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

Oto przykład roboczych:

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

https://output.jsbin.com/niyukadizu

Answer 3

Spróbuj tego.

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

To zadziałało dobrze dla mnie. Miałem dziwne problemy z przewijaniem spowodowane innymi hackami javascript. Przeczytaj ten artykuł, aby uzyskać więcej informacji.

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