Zbuduję pojedynczą aplikację internetową dla telefonów komórkowych. Aplikacja powinna wdrożyć przejścia między "ekranami" (jak każda inna aplikacja mobilna np. Facebook, Twitter), a te przejścia powinny być animowane (slajd w lewo). Każdy ekran musi zachować pozycję przewijania między przejściami.

Jednym oczywiste rozwiązanie, które ma na uwadze, to:

Viewport
+----------+ 
|+--------+| +--------+ +--------+ +--------+
|| DIV1   || | DIV2   | | DIV3   | | DIV4   |
||        || |        | |        | |        |
||        || |        | |        | |        |
||        || |        | |        | |        |
||        || |        | |        | |        |
|+--------+| +--------+ +--------+ +--------+
+----------+

Różne ekrany są umieszczane w pojemnikach (Div1, Div2, ...), które są stylizowane, aby pasowały do ekranu (position: absolute; width: 100%; height: 100%; top: 0) i mieć overflow-x: scroll. Pojemniki są umieszczone obok siebie, a przejście jest tak proste, jak animowanie ich left.

Łatwe do tej pory.

Problemem jest: W tym implecie pasek adresu nie znika w przeglądarce mobilnej, gdy użytkownik przewija się.

Mówię o tej funkcji: Wprowadź opis obrazu tutaj

To dlatego, że przeglądarki mobilne robią to tylko wtedy, gdy użytkownik przewija body, a nie pojemnik w body. Są Kilka < href = "https://stackoverflow.com/questions/9678194/cross-platform-method-for-removing-the-address-bar-in-a-mobile-web-app"> Sugestie do rozwiązania Ale nie pracują we wszystkich ukierunkowanych platformach (Android Chrome i Native Browser, iPhone Safari) i są dość hacky. Chciałbym zachować oryginalne zachowanie przeglądarki.

Z tego powodu - najwyraźniej - trzeba opuścić przewijanie na ciele. Oznacza to, że pojemniki muszą być "pełnej długości" (i nie przepełnienia-przewijania), nadal umieszczone obok siebie. Tutaj przejścia stają się trudne, jeśli o tym myślisz.

Moje obecne rozwiązanie ma następujące kroki podczas przejścia od Div1 do Div2:

  1. pozycja top div2 do prądu scrollTop okna
  2. Animuj właściwość Div1 i Div2 left}, dzięki czemu Div2 wypełnia ekran
  3. przesuń Div2's top do 0 Po zakończeniu animacji, aby użytkownik nie mógł przewinąć dalej niż górną część tego ekranu
  4. Przesuń scrolltop okna na 0
  5. Ukryj Div1 (w przypadku, gdy jest dłuższy niż Div2)

Przejście z powrotem do Div1 jest podobne, w odwrotnym. To faktycznie działa całkiem ładne (choć jest szaleńczo skomplikowany i korzysta z słuchaczy zdarzeń przejściowych), ale niestety jest naprawdę brzydki migotliwy wpływ między krokiem 3 a 4 w Safari IOS, ponieważ powoduje, że strona zaraz po kroku 3 bez oczekiwania na krok 4.

Szukam niezależnego ramy (Vanilla JS) rozwiązanie.

13
gphilip 12 sierpień 2014, 22:57

4 odpowiedzi

Możesz zrobić coś takiego, jeśli jesteś załadowany jQuery

$(document).ready(function() {
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0,0); // reset in case prev not scrolled  
var nPageH = $(document).height();
var nViewH = window.outerHeight;
if (nViewH > nPageH) {
  nViewH -= 250;
  $('BODY').css('height',nViewH + 'px');
}
window.scrollTo(0,1);
}

});

Dla iPhone musisz zrobić coś podobnego do poniższego linku

http://matt.might.net/articles/how-to-native-iphone-ipad-aps-in-javascript/

I dla safari.

https://developer.apple.com/library/safari/documentation/applaPplications/reference/safarihtmlref/articles/metatags.html.

Mam nadzieję, że ci to pomoże !!

2
StackUser 20 sierpień 2014, 01:08

Używanie window.scrollTo(0,1); można zniknąć pasek nawigacji. To hack, ale działa.

0
dieortin 16 sierpień 2014, 22:06

Dlaczego nie:

<body>
     <div id=header>Header</div>
     <div id=content>Scrollable Content</div>
     <div id=footer>Footer</div>
</body>

Potem CSS:

#header,#footer,#content{
    left:0%;
    right:0%;
}
#header,#footer{
    position:fixed;
}
#header{
    top:0%;
    height:30px;
}
#footer{
    bottom:0%;
    height:30px;
}
#content{
    position:absolute;
    top:30px;
    height:1000px; /*Whatever you need it to be*/
}

Ekran dotykowy reaguje na znacznik <body>, a nie <div>, więc ustawienie position:fixed na #header i #footer i #footer Niezależnie od pozycji przewijania, a następnie, gdy użytkownik przewija treść, przewijają <body>

Edytuj: Wdrożyłem to jako przykład:

https://www.museri.com/m.

Odwiedź na urządzeniu mobilnym.

0
Evan Hendler 20 sierpień 2014, 05:06

Myślę, że to zrozumiałem, to trudne.

Krótko mówiąc: W pytaniu opisuję moje obecne rozwiązanie, które migocze w IOS. W punkcie 3 musisz dodać position: fixed do Div2. W ten sposób będzie "kij" i unikniesz migoczącego w pkt 4. Wtedy musisz opóźnić punkt 4 kilka milisekundów ({x1}}, 500m pracował dla mnie, ale prawdopodobnie może być mniejszy) i ustawiony {x2} } Ponownie do Div2 zaraz po window.scrollTo. Nie jestem pewien, czy jest powód, dla którego potrzebujesz opóźnienia, ale bez tego ekran nadal migotuje.

Jeśli jest zainteresowanie, mogę opublikować Poc później.

W boku, znalazłem to całkiem rozczarowujące, że większość, jeśli ludzie, którzy odpowiedzieli, nie czytali tego pytania, ani po prostu całkowicie zignorowali niektóre kryteria (niezależność ramowa, utrzymując oryginalne zachowanie przewijania). Większość z nich sugeruje rozwiązania, które już specjalnie powiązane w pytaniu jako nie jest dopuszczalne. Niektórzy z nich odzyskują, gdy zostaną obniżone.

Edytuj: Dreamlab odpowiedział tylko kilka minut przed wysłaniem mojego rozwiązania. Oba rozwiązania używają position: fixed. Jego rozwiązanie jest bardziej szczegółowe. Zasługuje na nagrodę.

0
gphilip 21 sierpień 2014, 20:21