Pracuję nad aplikacją internetową opartą na iPadzie i muszę zapobiegać nadmiernemu przewijaniu, aby nie wyglądała jak strona internetowa. Obecnie używam tego do zamrożenia widocznego obszaru i wyłączenia nadmiernego przewijania:
document.body.addEventListener('touchmove',function(e){
e.preventDefault();
});
Działa to świetnie, aby wyłączyć nadmierne przewijanie, ale moja aplikacja ma kilka przewijalnych elementów div, a powyższy kod zapobiega ich przewijaniu .
Celuję tylko w system iOS 5 i nowszy, więc uniknąłem hakerskich rozwiązań, takich jak iScroll. Zamiast tego używam tego CSS dla moich przewijalnych elementów div:
.scrollable {
-webkit-overflow-scrolling: touch;
overflow-y:auto;
}
Działa to bez skryptu przewijania dokumentu, ale nie rozwiązuje problemu przewijania div.
Czy bez wtyczki jQuery można zastosować poprawkę overscroll, ale zwolnić z niej moje elementy div $ („. Scrollable”)?
EDYTOWAĆ:
Znalazłem coś, co jest przyzwoitym rozwiązaniem:
// Disable overscroll / viewport moving on everything but scrollable divs
$('body').on('touchmove', function (e) {
if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
});
Okno robocze nadal się przesuwa, gdy przewijasz początek lub koniec elementu div. Chciałbym również znaleźć sposób, aby to wyłączyć.
Odpowiedzi:
To rozwiązuje problem, gdy przewijasz poza początek lub koniec div
Pamiętaj, że to nie zadziała, jeśli chcesz zablokować przewijanie całej strony, gdy element div nie jest przepełniony. Aby to zablokować, użyj następującej procedury obsługi zdarzeń zamiast tej bezpośrednio powyżej (dostosowanej z tego pytania ):
źródło
.scrollable
bezpośrednio (co pierwotnie próbowałem rozwiązać ten problem). Jeśli jesteś noobem JavaScript i chcesz, aby prosty kod usuwał te programy obsługi gdzieś w dół, te dwie linie działają świetnie!$(document).off('touchmove');
AND$('body').off('touchmove touchstart', '.scrollable');
Korzystanie z doskonałej odpowiedzi Tylera Dodge'a wciąż pozostawało w tyle na moim iPadzie, więc dodałem kod ograniczający przepustowość, teraz jest całkiem płynny. Czasami podczas przewijania występuje minimalne pomijanie.
Ponadto dodanie następującego kodu CSS naprawia niektóre błędy renderowania ( źródło ):
źródło
Najpierw jak zwykle zapobiegaj domyślnym działaniom na całym dokumencie:
Następnie zatrzymaj propagację klasy elementów na poziom dokumentu. Zapobiega to osiągnięciu powyższej funkcji i dlatego e.preventDefault () nie jest inicjowana:
Ten system wydaje się być bardziej naturalny i mniej intensywny niż obliczanie klasy dla wszystkich ruchów dotykowych. Użyj .on () zamiast .bind () dla dynamicznie generowanych elementów.
Weź również pod uwagę te metatagi, aby zapobiec niefortunnym zdarzeniom podczas korzystania z przewijalnego elementu div:
źródło
Czy możesz dodać trochę więcej logiki do kodu wyłączającego przewijanie, aby upewnić się, że dany element docelowy nie jest tym, który chcesz przewinąć? Coś takiego:
źródło
Najlepszym rozwiązaniem jest css / html: utwórz element div, w którym zawiniesz swoje elementy, jeśli jeszcze go nie masz, ustaw go na stałą i ukrytą przepełnienie. Opcjonalnie ustaw wysokość i szerokość na 100%, jeśli chcesz, aby wypełniały cały ekran i tylko cały ekran
źródło
Sprawdź, czy przewijalny element jest już przewijany do góry podczas próby przewijania w górę lub do dołu podczas próby przewinięcia w dół, a następnie zapobiega domyślnej akcji zatrzymania całej strony.
źródło
Szukałem sposobu, aby zapobiec przewijaniu całej treści, gdy pojawia się wyskakujące okienko z przewijalnym obszarem (wyskakujące okienko „koszyka zakupów” z przewijanym widokiem koszyka).
Napisałem o wiele bardziej eleganckie rozwiązanie, używając minimalnego javascript, aby po prostu przełączać klasę „noscroll” w Twoim ciele, gdy masz wyskakujące okienko lub element div, który chcesz przewinąć (a nie „przewinąć” całą treść strony).
podczas gdy przeglądarki stacjonarne obserwują overflow: hidden - iOS wydaje się to ignorować, chyba że ustawisz pozycję na stałą ... co powoduje, że cała strona ma dziwną szerokość, więc musisz również ręcznie ustawić pozycję i szerokość. użyj tego css:
i to jquery:
źródło
Mam trochę obejścia bez jQuery. Niezbyt perfekcyjne, ale działa dobrze (zwłaszcza jeśli masz scroll-x w scoll-y) https://github.com/pinadesign/overscroll/
Zapraszam do udziału i ulepszania
źródło
To rozwiązanie nie wymaga umieszczania przewijalnej klasy na wszystkich przewijalnych elementach DIV, więc jest bardziej ogólne. Przewijanie jest dozwolone na wszystkich elementach, które są lub są elementami podrzędnymi elementów INPUT contenteditables oraz overflow scroll lub autos.
Używam niestandardowego selektora, a także buforuję wynik sprawdzenia w elemencie, aby poprawić wydajność. Nie ma potrzeby za każdym razem sprawdzać tego samego elementu. Może to mieć kilka problemów, które zostały tylko napisane, ale pomyślałem, że podzielę się.
źródło
Chociaż wyłączenie wszystkich zdarzeń „touchmove” może wydawać się dobrym pomysłem, gdy tylko będziesz potrzebować innych przewijalnych elementów na stronie, spowoduje to problemy. Ponadto, jeśli wyłączysz zdarzenia „touchmove” tylko dla niektórych elementów (np. Body, jeśli chcesz, aby strona nie była przewijalna), gdy tylko zostanie włączona w innym miejscu, IOS spowoduje niepowstrzymaną propagację w Chrome, gdy adres URL pasek przełącza.
Chociaż nie potrafię wyjaśnić tego zachowania, wydaje się, że jedynym sposobem zapobiegania wydaje się ustawienie pozycji ciała na
fixed
. Jedynym problemem jest utrata pozycji dokumentu - jest to szczególnie denerwujące na przykład w modach. Jednym ze sposobów rozwiązania tego problemu byłoby użycie tych prostych funkcji VanillaJS:Korzystając z tego rozwiązania, możesz mieć stały dokument, a każdy inny element na Twojej stronie może się przepełnić za pomocą prostego CSS (np
overflow: scroll;
.). Nie potrzeba żadnych specjalnych zajęć ani niczego innego.źródło
Oto rozwiązanie kompatybilne z Zepto
źródło
ten działa dla mnie (zwykły javascript)
html:
źródło
Spróbuj tego. Będzie działać idealnie.
źródło
Miałem zaskakujące szczęście z prostym:
Świetnie działa wyłączanie nadmiernego przewijania dla wyskakujących okienek lub menu i nie wymusza na paskach przeglądarki, aby wyglądały tak, jak podczas korzystania z pozycji: naprawiono. ALE - musisz zapisać pozycję przewijania przed ustawieniem stałej wysokości i przywrócić ją podczas ukrywania wyskakującego okienka, w przeciwnym razie przeglądarka przewinie się do góry.
źródło