Stworzyłem małą aplikację internetową HTML5 dla mojej firmy.
Ta aplikacja wyświetla listę pozycji i wszystko działa poprawnie.
Aplikacja jest używana głównie na telefonach z systemem Android i Chrome jako przeglądarce. Ponadto strona jest zapisywana na ekranie głównym, więc Android zarządza całością jako aplikacja ( chyba za pomocą WebView ).
Chrome Beta (i myślę, że także Android System WebView) wprowadził funkcję „pull down to refresh” ( zobacz na przykład ten link ).
Jest to przydatna funkcja, ale zastanawiałem się, czy można ją wyłączyć za pomocą jakiegoś metatagu (lub elementów javascript), ponieważ odświeżanie może być łatwo wyzwalane przez użytkownika podczas nawigacji po liście, a cała aplikacja jest ponownie ładowana.
Jest to również funkcja, której aplikacja nie potrzebuje.
Wiem, że ta funkcja jest nadal dostępna tylko w wersji beta Chrome, ale mam wrażenie, że ląduje też w stabilnej aplikacji.
Dziękuję Ci!
Edycja: odinstalowałem Chrome Beta, a link przypięty do ekranu głównego otwiera się teraz ze stabilną Chrome. Zatem przypięte linki zaczynają się od przeglądarki Chrome, a nie od widoku internetowego.
Edycja: dzisiaj (19.03.2015) funkcja pull-down to refresh doszła do stabilnego chromu.
Edycja: z odpowiedzi @Evyn podążam za tym linkiem i otrzymałem ten kod javascript / jquery, który działa.
Jak zauważył @bcintegrity, mam nadzieję na rozwiązanie manifestu witryny (i / lub metatag) w przyszłości.
Ponadto mile widziane są sugestie dotyczące powyższego kodu.
źródło
Odpowiedzi:
Domyślnej akcji efektu „pociągnij, aby odświeżyć” można skutecznie zapobiec, wykonując jedną z następujących czynności:
preventDefault
część sekwencji dotykowej, w tym dowolne z poniższych (w kolejności od najbardziej uciążliwych do najmniej uciążliwych):touch-action: none
” do elementów kierowanych na dotyk, w stosownych przypadkach, wyłączanie domyślnych działań (w tym „przeciągnij, aby odświeżyć”) sekwencji dotykowej.overflow-y: hidden
” do elementu body, w razie potrzeby użycie elementu div do przewijania zawartości.chrome://flags/#disable-pull-to-refresh-effect
).Zobacz więcej
źródło
Proste rozwiązanie na rok 2019+
Chrome 63 dodał właściwość css, która pomaga właśnie w tym. Przeczytaj ten przewodnik Google, aby dowiedzieć się, jak sobie z tym poradzić.
Oto ich TL: DR
Aby to działało, wszystko, co musisz dodać, to to w swoim CSS:
To także tylko obsługiwany przez Chrome, Edge i Firefox, ale jestem pewien, że Safari doda go wkrótce, gdy wydaje się, że są w pełni na pokładzie z pracownikami usług i przyszłością PWA.
źródło
W tej chwili możesz wyłączyć tę funkcję tylko przez chrome: // flags / # disable-pull-to-refresh-effect - otwórz bezpośrednio z urządzenia.
Możesz próbować łapać
touchmove
wydarzenia, ale szanse na osiągnięcie akceptowalnego wyniku są niewielkie.źródło
Używam MooTools i utworzyłem klasę, aby wyłączyć odświeżanie na docelowym elemencie, ale sednem tego jest (natywny JS):
Wszystko, co tutaj robimy, to znalezienie kierunku y ruchu dotykowego, a jeśli poruszamy się w dół ekranu, a przewijanie celu ma wartość 0, zatrzymujemy zdarzenie. Tak więc nie ma odświeżania.
Oznacza to, że strzelamy do każdego `` ruchu '', co może być kosztowne, ale jest najlepszym rozwiązaniem, jakie do tej pory znalazłem ...
źródło
scrolltop > 0
zdarzenie nie zostanie wywołane. W mojej realizacji wiążętouchmove
zdarzenietouchstart
tylko wtedy, gdyscrollTop <= 0
. Rozpinam go, gdy tylko użytkownik przewinie w dół (initialY >= e.touches[0].clientY
). Jeśli użytkownik przewinie w górę (previousY < e.touches[0].clientY
), dzwoniępreventDefault
.Po wielu godzinach prób to rozwiązanie u mnie działa
źródło
html{touch-action:pan-down}
AngularJS
Pomyślnie wyłączyłem go za pomocą tej dyrektywy AngularJS:
Można bezpiecznie zatrzymać oglądanie, gdy tylko użytkownik przewinie ekran w dół, ponieważ ciągnięcie w celu odświeżenia nie ma szans na uruchomienie.
Podobnie, jeśli
scrolltop > 0
zdarzenie nie zostanie wywołane. W mojej implementacji wiążę zdarzenie touchmove przy touchstart, tylko jeśliscrollTop <= 0
. Rozpinam go, gdy tylko użytkownik przewinie w dół (initialY >= e.touches[0].clientY
). Jeśli użytkownik przewinie w górę (previousY < e.touches[0].clientY
), dzwoniępreventDefault()
.Oszczędza nam to niepotrzebne oglądanie zdarzeń przewijania, ale blokuje nadmierne przewijanie.
jQuery
Jeśli używasz jQuery, jest to nieprzetestowany odpowiednik.
element
jest elementem jQuery:Oczywiście to samo można osiągnąć za pomocą czystego JS.
źródło
e.originalEvent.touches[0].clientY
aby to zadziałało. Wciąż zmagam się z logiką, kiedy należy zapobiec przeładowaniu. W tej chwili wydaje się, że losowo uniemożliwia przewijanie w górę ... Podziękuj za wskazówkę we właściwym kierunku!Prosty skrypt JavaScript
Wdrożyłem za pomocą standardowego javascript. Prosty i łatwy do wdrożenia. Po prostu wklej i działa dobrze.
źródło
body: {overflow-y:hidden}
sztuczkę Evyn powyżej .Najlepsze rozwiązanie w czystym CSS:
Zobacz to demo: https://jsbin.com/pokusideha/quiet
źródło
Możesz tego spróbować
przykład:
https://ebidel.github.io/demos/chatbox.html
pełny dokument https://developers.google.com/web/updates/2017/11/overscroll-behavior
źródło
Uważam, że ustawienie przepełnienia CSS twojego ciała : ukryte jest najprostszym sposobem. Jeśli chcesz mieć przewijaną stronę aplikacji, możesz po prostu użyć kontenera div z funkcjami przewijania.
źródło
Zauważ, że overflow-y nie jest dziedziczone, więc musisz ustawić go na WSZYSTKICH elementach blokowych.
Możesz to zrobić za pomocą jQuery po prostu:
źródło
Od kilku tygodni dowiedziałem się, że funkcja javascript, której użyłem do wyłączenia akcji odświeżania Chrome, już nie będzie działać. Zrobiłem to, aby to rozwiązać:
źródło
Czyste rozwiązanie JS.
źródło
To, co zrobiłem, to dodanie następujących elementów do
touchstart
itouchend
/touchcancel
wydarzeń:Ponieważ chrome nie przewija się, jeśli nie znajduje się w pozycji scrollY
0
, zapobiegnie to ciągnięciu przez chrome w celu odświeżenia.Jeśli nadal nie działa, spróbuj zrobić to również podczas ładowania strony.
źródło
Rozwiązałem problem z rozwijaniem w celu odświeżenia w ten sposób:
źródło