iOS 5 poziționare fixă și derulare conținut

Două dintre cele mai cunoscute îmbunătățiri ale Safari pe iOS 5 sunt suportul de poziționare fixă și de defilare a conținutului. Acest tutorial vă va învăța cum să profitați de această schimbare și care sunt implicațiile pentru bibliotecile JavaScript de tip stop-gap precum iScroll.

Într-un tutorial anterior, am vorbit despre iScroll și despre modul în care acest plugin foarte mic a ajutat la rezolvarea unei probleme cu iOS Webkit (5.0 și versiuni ulterioare) și Android Webkit (2.1 sau versiuni ulterioare), în care nu exista suport nativ pentru zonele de poziționare fixă sau scrollabilă.

Deci, după un weekend de difuzare a diferitelor teste, este bine să confirmați că actualizarea iOS 5 Safari abordează acum ambele probleme și că acum avem suport complet nativ pentru ei. Acesta a fost în construcție de ceva timp în ceea ce privește versiunile beta pentru iOS 5, dar niciodată nu puteți garanta că aceste lucruri vor ajunge la versiunea finală.

În acest tutorial, voi discuta această schimbare pe lungime și vă voi învăța cum să convertiți proiectul iScroll de la tutorialul nostru anterior la utilizarea noilor proprietăți CSS.

Ce înseamnă această schimbare??

Pentru a fi explicit, avem acum posibilitatea de a crea aplicații web care utilizează antete și subsoluri fixe Poziția: fix precum și conținutul derulant între utilizare -webkit-overflow-defilare. Acest lucru ne permite să construim aplicații cu o senzație mai nativă fără a fi nevoie să apelați la un plugin de la o terță parte, cum ar fi iScroll. După cum veți vedea, deocamdată există încă câteva motive bune pentru a depinde de bibliotecile terților cum ar fi iScroll.

Precauțiile

Deși această schimbare este o veste bună pentru dezvoltatorii web, există câteva avertismente care merită discutate.

În primul rând, cel mai evident este că această caracteristică este în prezent acceptată numai în Safari 5.1. În timp ce noul 4S a înregistrat precomandări record și mulți utilizatori din trecut au făcut deja upgrade la iOS 5, probabil vor exista probabil o cantitate substanțială de utilizatori de dispozitive iOS pe 5.0 sau mai mici.

În continuare, în prezent nu există nicio modalitate de a elimina bara de derulare care apare în partea laterală a zonei de conținut. Ai putea încerca să faci ceva cu webkit-scrollbar Metoda CSS de a schimba culorile etc, dar nu văd acest lucru ca o problemă masivă. Bara de derulare este un element de interfață uimitor care face utilizatorul conștient de locul în care se află în document. De ce să vă deranjez să o eliminați?

O altă problemă: nu există nicio modalitate de a defini zona de "bandă de cauciuc" a browserului, deoarece va fi doar bandă de cauciuc la partea superioară și inferioară a zonei ecranului, inclusiv bara de adrese. Am inceput sa lucrez la un pic de JavaScript pentru a compensa manual valoarea scrolTop la fiecare capat cu 1, dar apoi am gasit ca Joe Lambert a facut deja acest lucru cu scrollFix.js.

În cele din urmă, momentul derulării nu are în prezent control al vitezei. Acest lucru ar fi mult mai frumos.

Ajungeți la această problemă, să aruncăm o privire asupra modului în care putem începe să folosim CSS recent susținut!

Pasul 1. Eliminați JavaScript

Să aruncăm o privire asupra modului de a converti proiectul nostru trecut la utilizarea noilor reguli CSS. Vom folosi pagina noastră construită anterior cu iScroll pentru demonstrație.

Primul lucru pe care trebuie să-l faceți este să eliminați includerea JavaScript și apelul iScroll din partea de jos a documentului, astfel încât să ajungeți la un fișier HTML simplu și CSS similar celui de mai jos:

       Șablonul aplicației web     Șablonul aplicației web     Niste chestii
 Mai multe lucruri
 Lucruri mari
 Lucruri mici
 Geek Stuff
 Nerd Stuff
 Lucruri rapide
 Lucru lent
 Lucruri bune
 Lucruri rele
 Lucrurile tale
 Lucrurile mele
 Lucrurile lor
 Lucrurile noastre
 Super lucruri
 Uber Stuff
 Stuff Stuff
 Stuff francez
 Lucruri germane
 Engleză Stuff
 Stuff american
 Chestie
 
 
 
  Unele Conținut Footer

Pasul 2. Ajustați CSS

Nu este nevoie să modificăm deloc codul nostru HTML. Trebuie doar să ajustăm o parte din CSS și să adăugăm o clasă nouă.

 -webkit-overflow-scrolling: auto;

Aceasta este noua clasă care a fost introdusă în jurul versiunii beta 2 a iOS 5 și este cea care ne dă un impuls de derulare. În mod prestabilit, acesta este setat automat, ceea ce oferă aspectului rigid aspectul rigid. Pentru a oferi zonei dvs. de derulare o senzație mai nativă, setați această proprietate să atingă.

 -webkit-overflow-scrolling: atingere;

Acum, aplicați acest stil conținutului scrol div și vom elimina unele dintre stilurile din ambalaj, în special poziționarea și depășirea. De fapt, nu avem nevoie de ambalaj div la toate, astfel încât să puteți elimina dacă doriți, dar îmi place să am div în jurul valorii de doar pentru a înfășura ceva, dacă este nevoie. Cele două reguli CSS ar trebui să arate mai jos:

 #wrapper z-index: 1; lățime: 100%; fundal: #aaa;  # scroll-content poziție: absolută; top: 0; z-index: 1; lățime: 100%; padding: 0; defilare -webkit-overflow-: atingere; overflow: auto;

Pasul 3. Fixarea antetului și a subsolului

Înainte, am avut antetul și subsolul setate la valoare absolută (ca fix nu a fost acceptată). Acum putem merge mai departe și le poziționăm în CSS folosind regula fixă pentru a le împiedica să se îndepărteze de pe ecran.

 header culoare-fundal: # deb500; Poziția: fix; z-index: 2; top: 0; stânga: 0; lățime: 100%; înălțime: 45px; padding: 0;  footer background-color: # c27b00; Poziția: fix; z-index: 2; bottom: 0; stânga: 0; lățime: 100%; înălțime: 48px; padding: 0; frontieră-sus: 1px solid # 444;

Dacă nu cunoașteți diferența dintre poziția fixă și poziționarea absolută, versiunea scurtă este aceea că poziționarea absolută este o poziție definită față de elementul părinte. Poziționarea fixă este o poziție fixată în fereastra de vizualizare.

Veți avea acum o zonă de derulare cu un antet și un subsol fix, fără a utiliza Javascript!

Viitorul

Va fi frumos când alte browsere se vor prinde din urmă (telefonul pe fereastră vă uit la tine!) Și majoritatea utilizatorilor se află pe un sistem de operare Android mai mare decât 2.1, dar viitorul apropiat ar trebui să vadă unele îmbunătățiri frumoase pe browserele bazate pe webkit. Cu o creștere a vitezei în fiecare iterație, aplicațiile realizate cu tehnologii bazate pe web ar putea depăși rapid aplicațiile native. Tot ce avem nevoie acum sunt API-uri mai native!

În cazul în care acest lucru Lasă iScroll?

iScroll are încă un loc în acest moment. Există mulți parametri pe care le putem trece la metoda de derulare pentru a oferi câteva opțiuni suplimentare pentru modul în care derulează și pare aspectul nostru care nu poate fi realizat în prezent fără scrierea unui JavaScript personalizat? de ce să nu folosiți ceea ce este deja disponibil?

Există și problema suportului pentru browser. Poate că într-adevăr aveți nevoie de barele de instrumente fixe pe care le proiectați în implementările mai vechi ale browserului webkit. Ei bine, nici o problemă. Dacă este cel mai bun lucru pentru proiect, atunci nu este nici o rușine să folosiți una dintre bibliotecile JavaScript existente pentru ao realiza. Cu toate acestea, aș sugera folosirea implementării native ori de câte ori este posibil.

Dincolo de funcționalitatea de derulare simplă, biblioteca iScroll oferă, de asemenea, câteva funcții suplimentare extraordinare, cum ar fi "Trageți spre reîmprospătare", "Pinch / Zoom" și "SNAP / Snap to Element". Putem să le acoperim într-un tutorial iScroll ulterior, deoarece acestea sunt în continuare funcții utile și relevante.

Cod

iOS 5 poziționare fixă ​​și derulare conținut