2011-07-01 16 views
8

Zbudowałem złożone formularze na mobilnej aplikacji danych i szukam teraz rozwiązania, które umożliwiałoby utrzymanie pozycji tytułu i stopki. W moim manekinie, który został opracowany i przetestowany w przeglądarce Chrome i Safari na moim pulpicie, umieściłem tylko nagłówek i stopkę absolutną, a także sekcję zawartości, której wysokość jest ustawiana przez JavaScript w zdarzeniu zmiany rozmiaru okna.Poszukuję alternatywy dla iScroll (Scrolling Div's na iOS/Webkit)

To nie jest właściwy sposób dla mobilnego świata, ponieważ przepełnienie: auto nie jest obsługiwane w mobilnym pakiecie WebKit.

Próbowałem niektórych rzeczy przeze mnie i przyjrzałem się również iScroll. W rzeczywistości iScroll spowodował awarię safari na moim iPadzie, podczas gdy aplikacja bez tego składnika działa całkiem gładko. Mam wiele stosunkowo skomplikowanych formularzy, co może być wyzwaniem dla iScroll, którego nie mogę wygrać, jak sądzę.

Poszukuję innych sposobów osiągnięcia mojego celu (utrzymanie nagłówka i stopki) bez pozwalania użytkownikowi na używanie dwóch palców do przewijania (w rzeczywistości prawie nikt nie wie, że "sztuczka").

Wszelkie sugestie?

Dzięki!

Odpowiedz

14

więc istnieją trzy powszechnie wymienione rozwiązania:

  1. iScroll
  2. YUI ScrollView
  3. Scrollability

Oni wszyscy bardzo schludny do przewijania prostych list. Ale nikt tak naprawdę nie działa, jeśli jego celem jest obsługa pełnych stron zawierających więcej niż tylko listę, na przykład złożone okna dialogowe z dynamicznymi formularzami i tak dalej.

Po prostu postanowiłem poddać się i czekać rok - Apple ogłosił ostatnio poparcie dla stanowiska: naprawiono i przepełniono: przewiń, który zrewolucjonizuje tę część i rozwiąże wszystkie tego rodzaju problemy, które mamy dzisiaj.

Dzisiaj przypomniałem sobie stronę internetową firmy w naszym budynku tutaj w Monachium, otworzyłem ją za pomocą iPada, i rzeczywiście miała ona przewijaną sekcję wiadomości na jej pierwszej stronie. Więc zajrzałem do środka i zobaczyłem, że używa ... tadaaa ... jScrollPane.

Nie sądzę, że jScrollPane został opracowany z myślą o używaniu go na urządzeniach mobilnych, ale został zoptymalizowany również do tego celu. Działa tylko na moim iPadzie, moim Androidzie 2.3, a także na najnowszym Opera Mobile.

To nie ma ochoty przewijanie natywną aplikację na urządzeniu mobilnym, ale pozwala zobaczyć w pełni konfigurowalny pasek przewijania, skakać do góry i do Buttom i, co najważniejsze, przewijać jednym palcem.

Bardzo ładne.

+1

Początkowo używałem iScroll, ale było to w konflikcie z fullCalendar. Później próbowałem YUI ScrollView i Scrollability, ale niestety nie byłem w stanie sprawić, by działały w moim projekcie ... ale jScrollPane działał jak czar! Dziękuję Ci. –

+2

Walczył z iScroll 4 przez miesiące, 30 sekund z jscrollPane i mój html jest lżejszy. –

11

Mobilny webkit obsługuje teraz przewijanie przy użyciu tylko CSS. Utworzyć klasę „przewijania” i dodaj następujące reguły:

.scrollable { 
     overflow-y: scroll; 
     -webkit-overflow-scrolling: touch; 
    } 

Dodaj swoją klasę „” przewijalną do dowolnego elementu blokowego, które wymagają przewijania. Tylko Webkit.

+0

tak, który został wprowadzony wraz z iOS 5 (dość długo po tym, jak poprosiłem o to zeszłego lata) –

+1

Użyłem tego podejścia i to właśnie doprowadziło mnie do tego postu. To jest straszne. Wydarzenia, które wywołuje, są całkowicie nieprzewidywalne, co sprawia, że ​​trudno jest z nich skorzystać na czymkolwiek poważnym, gdy zależy ci na tym, kiedy użytkownik przestanie przewijać. – Kir

1

https://github.com/filamentgroup/Overthrow/

rozwiązanie oparte Lightweight polyfill że niech nowoczesnych przeglądarek z przelewem: przewijanie wsparcie robić swoje rzeczy.

Ciągle we wczesnej fazie rozwoju, ale działa całkiem dobrze w największej bazie użytkowników (Android 2.2/2.3/iOS < 5).