Pracuję nad aplikacją opartą na przeglądarce, obecnie rozwijam i projektuję dla przeglądarki iPad Safari.
Szukam dwóch rzeczy na iPadzie: Jak wyłączyć przewijanie w pionie na stronach, które tego nie wymagają? i jak mogę wyłączyć efekt sprężystego odskoku?
ipad
scroll
mobile-safari
bounce
Adam
źródło
źródło
Odpowiedzi:
Ta odpowiedź nie ma już zastosowania, chyba że tworzysz oprogramowanie dla bardzo starego urządzenia z systemem iOS ... Zobacz inne rozwiązania
Odpowiedź z 2011 roku: W przypadku aplikacji internetowej / html działającej w iOS Safari potrzebujesz czegoś podobnego
W przypadku iOS 5 warto wziąć pod uwagę: document.ontouchmove i przewijanie w iOS 5
Aktualizacja wrzesień 2014: Dokładniejsze podejście można znaleźć tutaj: https://github.com/luster-io/prevent-overscroll . Informacje na ten temat oraz wiele przydatnych porad dotyczących aplikacji
internetowych możnaznaleźć podadresem http://www.luster.io/blog/9-29-14-mobile-web-checklist.htmlAktualizacja z marca 2016 r .: Ten ostatni link nie jest już aktywny - zobacz https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist .html dla wersji zarchiwizowanej. Dzięki @falsarella za wskazanie tego.
źródło
onTouchMove: function(e) { e.stopPropagation(); e.stopImmediatePropagation(); }
Zapobiegnie to uderzaniu zdarzenia w ciało, ale treść nie będzie odbijana. Edycja: Zakładamy, że ustawiłeś $ ('div'). On ('touchmove', ... onTouchMove);Możesz także zmienić położenie body / html na naprawione:
źródło
Aby zapobiec przewijaniu w nowoczesnych przeglądarkach mobilnych, musisz dodać pasywne: false. Wyrywałem sobie włosy, żeby to zadziałało, dopóki nie znalazłem tego rozwiązania. Znalazłem to wspomniane tylko w jednym miejscu w Internecie.
źródło
{ passive: false }
tego na pewno nie działa !!! Witaj na StackOverflow dudeoverflow-y: scroll
? Na przykład mając modal z wyższą wysokością widoku niż ciało.Możesz użyć tego fragmentu kodu jQuery, aby to zrobić:
Spowoduje to zablokowanie przewijania w pionie, a także wszelkich efektów odbijania się na Twoich stronach.
źródło
Na kontenerze możesz ustawić efekt odbicia wewnątrz elementu
Źródło: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
źródło
overflow:hidden
on the<body>
nadal jest to najlepsze rozwiązanie. Jednak podczas otwierania klawiatury lub przesuwania w dół ekranu, nie będzie już działać.Wiem, że jest to trochę poza trasą, ale używałem Swiffy do konwersji Flasha na interaktywną grę HTML5 i napotkałem ten sam problem z przewijaniem, ale nie znalazłem rozwiązania, które działało.
Problem, jaki miałem, polegał na tym, że scena Swiffy zajmowała cały ekran, więc po załadowaniu zdarzenie dotknięcia dokumentu nigdy nie zostało wyzwolone.
Jeśli próbowałem dodać to samo zdarzenie do kontenera Swiffy, zostało ono zastąpione zaraz po załadowaniu sceny.
W końcu rozwiązałem to (raczej niechlujnie), stosując zdarzenie touchmove do każdego DIV na scenie. Ponieważ te elementy div również się zmieniały, musiałem je sprawdzać.
To było moje rozwiązanie, które wydaje się działać dobrze. Mam nadzieję, że będzie to pomocne dla każdego, kto próbuje znaleźć to samo rozwiązanie co ja.
źródło
Kod do usuwania ipad safari: wyłącz przewijanie i efekt odbijania
Jeśli masz tag canvas w dokumencie, czasami będzie to miało wpływ na użyteczność obiektu wewnątrz Canvas (przykład: ruch obiektu); więc dodaj poniższy kod, aby to naprawić.
źródło
Spróbuj tego rozwiązania JS :
Zapobiega domyślnemu przewijaniu i odbijaniu gestów przeglądarki Safari bez odłączania detektorów zdarzeń dotykowych.
źródło
żadne z rozwiązań nie działa dla mnie. Tak to robię.
źródło
Przetestowano na iPhonie. Po prostu użyj tego css na kontenerze elementu docelowego, a zmieni to zachowanie przewijania, które zatrzymuje się, gdy palec opuszcza ekran.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
źródło
Dla tych, którzy używają MyScript aplikacji internetowej i zmagają się z przewijaniem / przeciąganiem ciała (na iPadzie i tabletach) zamiast pisać:
<body touch-action="none" unresolved>
To naprawiło to dla mnie.
źródło
Możesz użyć js, aby zapobiec przewijaniu:
I niż tylko uruchamianie / zatrzymywanie
toggleScroll
funkcji podczas otwierania / zamykania trybu.Lubię to
toggleScroll(true) / toggleScroll(false)
(To jest tylko dla iOS, na Androidzie nie działa)
źródło
Wypróbuj to rozwiązanie JS, które przełącza
webkitOverflowScrolling
styl. Sztuczka polega na tym, że ten styl jest wyłączony, mobilne Safari przechodzi do zwykłego przewijania i zapobiega nadmiernemu odbiciu - niestety nie jest w stanie anulować trwającego przeciągania. To złożone rozwiązanie śledzi również,onscroll
gdy odbicie od góry sprawia,scrollTop
że wartość ujemna może być śledzona. To rozwiązanie zostało przetestowane na iOS 12.1.1 i ma jedną wadę: podczas przyspieszania przewijania nadal występuje pojedyncze przeskakiwanie, ponieważ resetowanie stylu może nie anulować go natychmiast.źródło
poprawiona odpowiedź @Ben Bos i skomentowana przez @Tim
Ten CSS pomoże uniknąć problemów z przewijaniem i wydajnością przy ponownym renderowaniu CSS, ponieważ pozycja została zmieniona / niewielkie opóźnienie bez szerokości i wysokości
źródło
Dla tych z Was, którzy nie chcą pozbyć się odbijania, ale chcą tylko wiedzieć, kiedy się zatrzymają (na przykład, aby rozpocząć obliczenia odległości ekranu), mogą wykonać następujące czynności (kontener to przepełniony element kontenera):
źródło
Wyłącz efekt przewijania odbijania safari:
źródło
Podobnie jak w przypadku złego kiwi, sprawiłem, że działa na podstawie wysokości, a nie pozycji:
źródło
Rozwiązanie przetestowane, działa na iOS 12.x.
Oto problem, który napotkałem:
Kiedy przewijam galerię, ciało zawsze przewija się (ruchy człowieka nie są tak naprawdę poziome), przez co moja galeria jest bezużyteczna.
Oto, co zrobiłem, gdy moja galeria zaczęła się przewijać
A kiedy moja galeria zakończy przewijanie ...
Mam nadzieję, że to pomoże ~
źródło