Crearea unui element "lipicios" cu poziție fixă ​​care funcționează pe Safari iOS

Pe safari iOS, panningul cu un singur deget nu generează niciun eveniment până când utilizatorul nu mai face panning. Un eveniment de onscroll este generat numai atunci când pagina se oprește în mișcare și redesenare.

Am nevoie de o modalitate de a detecta derularea în timp real. Mai exact, vreau să fac un meniu lipicios care să funcționeze și pe iOS safari. Pe browserele non-mobile, meniul lipicios poate fi făcut prin comutarea între poziția "relativă" și "poziția fixă" a elementului în timp ce ascultați evenimentele de onscroll. Această metodă nu va funcționa în browserul mobil deoarece evenimentele de tip onscroll nu sunt concediate în mod continuu. Ce pot face?

18
O modalitate de a implementa o metodă (deși hacker-ish) ar putea fi să vă recunoașteți propriul gest Pan vertical și să îl adăugați la vizualizarea web. În acest fel, puteți utiliza proprietatea-stat pentru a primi evenimente.
adăugat autor CodaFi, sursa
obligați să atingeți mutarea și să monitorizați y-ul paginii
adăugat autor sciritai, sursa

5 răspunsuri

Answering my own question. iOS7 now support position:sticky Demo: http://html5-demos.appspot.com/static/css/sticky.html

11
adăugat

Subiect vechi sigur, dar pot vedea multe vizite aici. Dacă tot ce doriți, este un meniu lipicios, puteți utiliza poziționarea fixă. Nu este nevoie de iScroll acolo.

3
adăugat
Trebuie subliniat faptul că persoana care a adresat întrebarea a găsit o soluție cu mult mai puțină susținere decât soluția mea ... și nu sunt de acord cu afirmația dvs. privind susținerea poziției: fix: caniuse.com/css-fixed
adăugat autor curly_brackets, sursa
Cu ce ​​să nu fiți de acord? "Suportul parțial în iOS Safari se referă la comportamentul bug-urilor." Deci este un comportament buggy în ~ 50% din browserele mobile acceptate de dvs.?
adăugat autor Thomas McCabe, sursa
Trebuie subliniat faptul că poziționarea fixă ​​nu este acceptată bine în multe browsere mobile. Mai multe aici: bradfrostweb.com/blog/mobile/fixed-position
adăugat autor Jonathan Stark, sursa

Recent am petrecut multe ore încercând să găsesc o soluție practică pentru aceeași problemă. Nu există o modalitate corectă de a face acest lucru, deși există câteva hack-uri decente (cele mai multe dintre ele fiind deja menționate). Problema este că JavaScript este întrerupt în timp ce utilizatorul derulează. Are sens când luați în considerare implicațiile, dar este greu de implementat elementul poziționat fix.

Cel mai bun lucru pe care l-am putut găsi este acest post minunat de cei de la Google. Puteți să vizitați http://gmail.com în safari mobili pentru a le vedea în acțiune.

https://developers.google.com/mobile/articles/webapp_fixed_ui

Sper că acest lucru vă ajută.

3
adăugat
Acest link se redirecționează către pagina de pornire a dezvoltatorilor. Cel mai bun lucru pe care l-am putut găsi a fost via archive.org: web.archive.org/web/20141001100814/https://…
adăugat autor duncan, sursa

Am avut o problemă asemănătoare și le-am împărțit pe touch handles/touchmove/touchend folosind jQuery pentru a detecta derularea cu degetul unic și a funcționat perfect. În cazul meu, trebuia să muiesc un alt element la aceeași valoare ca și încercarea de mutare a altui element și sa actualizat frumos pe măsură ce s-a încercat defilarea, astfel încât ar trebui să fie potrivit pentru cerința dvs.

2
adăugat

Dacă tot ce doriți este un meniu lipicios, vă puteți salva unele dureri de cap prin utilizarea unei biblioteci existente. Am avut succes cu iScroll:

http://cubiq.org/iscroll

Cel puțin, puteți să aruncați o privire asupra modului în care aceasta funcționează și să vă bazați soluția în jurul acesteia.

Hacking fericit!

0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
254 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com

JavaScript jobs România Moldova
JavaScript jobs România Moldova
109 participanți

Pentru confort opriți notificările. Vorbim despre posturi de muncă și freelance, proiecte proprii.

iOS dezvoltatori, România — Moldova
iOS dezvoltatori, România — Moldova
18 participanți

Parteneri: ciupacabra.com, @php_ro, @js_ro, @node_ro, @seo_ro Android: @ro_android