iOS 5 posizionamento fisso e scorrimento del contenuto

Due dei miglioramenti più celebri di Safari su iOS 5 sono il posizionamento fisso e il supporto per lo scorrimento del contenuto. Questo tutorial ti insegnerà come sfruttare questo cambiamento e quali sono le implicazioni per le librerie JavaScript stop-gap come iScroll.

In un tutorial precedente, ho parlato di iScroll e di come questo piccolo plugin ha contribuito a risolvere un problema con iOS Webkit (5.0 e successivi) e Android Webkit (2.1 o successivi), in cui non esisteva alcun supporto nativo per il posizionamento fisso o aree a contenuto scorrevole.

Quindi, dopo un weekend di prove varie, è bello confermare che l'aggiornamento di iOS 5 Safari ora affronta entrambi questi problemi e ora abbiamo il pieno supporto nativo per loro. E 'stato in cantiere per qualche tempo in termini di versioni beta per iOS 5, ma non si può mai garantire che queste cose arriveranno alla versione finale.

In questo tutorial, discuterò a lungo di questo cambiamento e ti insegnerò anche come convertire il progetto iScroll dal precedente tutorial all'uso delle nuove proprietà CSS.

Cosa significa questo cambiamento?

Per essere espliciti, ora abbiamo la possibilità di creare app web con intestazioni e piè di pagina fissi position: fixed così come il contenuto scorrevole tra l'utilizzo -webkit-trabocco a scorrimento. Questo ci consente di creare applicazioni con un tocco più nativo senza dover ricorrere a un plug-in di terze parti, come iScroll. Come vedrai, per ora ci sono ancora dei buoni motivi per dipendere da librerie di terze parti come iScroll.

I caveat

Mentre questo cambiamento è una grande notizia per gli sviluppatori web, ci sono alcune precauzioni da discutere.

Innanzitutto, la più ovvia è che questa funzione è attualmente supportata solo in Safari 5.1. Mentre il nuovo 4S ha visto i preordini record e molti utenti passati hanno già effettuato l'aggiornamento a iOS 5, probabilmente ci sarà ancora una notevole quantità di utenti di dispositivi iOS su 5.0 o inferiori.

Successivamente, non esiste attualmente alcun modo per rimuovere la barra di scorrimento che appare sul lato dell'area del contenuto. Potresti provare a fare qualcosa con il webkit-scrollbar Metodo CSS per cambiare i colori, ecc., Ma non lo vedo come un grosso problema. La barra di scorrimento è un elemento di interfaccia utente piacevole che rende l'utente consapevole di dove si trova nel documento. Perché preoccuparsi di rimuoverlo?

Un altro problema: non c'è modo di definire l'area "rubber banding" del browser, in quanto sarà solo un elastico nella parte superiore e inferiore dell'area dello schermo, inclusa la barra degli indirizzi. Avevo iniziato a lavorare su un po 'di JavaScript per spostare manualmente il valore scrollTop alle due estremità di 1, ma poi ho scoperto che Joe Lambert lo aveva già fatto con scrollFix.js.

Infine, il momento di scorrimento attualmente non ha controllo di velocità. Questo sarebbe più di un piacere.

Basta con i problemi, diamo un'occhiata a come possiamo iniziare a utilizzare il nuovo CSS supportato!

Passaggio 1. Rimuovere il JavaScript

Diamo un'occhiata a come convertire il nostro progetto passato in usando le nuove regole CSS. Useremo la nostra pagina costruita in precedenza con iScroll per dimostrazione.

La prima cosa da fare è rimuovere l'inclusione di JavaScript e la chiamata iScroll dal fondo del documento, così si finisce con un semplice file HTML e CSS come quello qui sotto:

       Modello di app Web     Modello di app Web     Della roba
 Più roba
 Grandi cose
 Piccole cose
 Geek Stuff
 Nerd Stuff
 Fast Stuff
 Slow Stuff
 Roba buona
 Brutta roba
 La tua roba
 La mia roba
 Le loro cose
 La nostra roba
 Super cose
 Uber Stuff
 Roba di roba
 Roba francese
 Roba tedesca
 Roba inglese
 Roba americana
 Cose
 
 
 
  Alcuni contenuti di piè di pagina

Passaggio 2. Regola il CSS

Non è necessario modificare il nostro codice HTML. Abbiamo solo bisogno di adattare alcuni dei nostri CSS e aggiungere una nuova classe.

 -webkit-overflow-scrolling: auto;

Questa è la nuova classe introdotta attorno alla beta 2 di iOS 5, ed è quella che ci dà lo scrolling del momento positivo. Per impostazione predefinita, è impostato su auto, che conferisce allo scorrimento un aspetto e una sensazione rigidi. Per dare alla tua area di scorrimento un aspetto più nativo, imposta questa proprietà al tocco.

 -webkit-overflow-scrolling: touch;

Ora applica questo stile al contenuto del rotolo div e stiamo andando a rimuovere alcuni degli stili dal wrapper, principalmente il posizionamento e l'overflow. In realtà, non abbiamo davvero bisogno del wrapper div del tutto, quindi puoi rimuoverlo se lo desideri, ma mi piace avere un div in giro solo per avvolgere qualsiasi cosa, se necessario. Le due regole CSS dovrebbero apparire come segue:

 # wrapper z-index: 1; width: 100%; sfondo: #aaa;  # scroll-content position: absolute; top: 0; z-index: 1; width: 100%; padding: 0; -webkit-trabocco a scorrimento: tatto; overflow: auto;

Passaggio 3. Correzione dell'intestazione e del piè di pagina

Prima, avevamo l'intestazione e il piè di pagina impostati su assoluto (come fisso non era supportato). Ora possiamo andare avanti e posizionarli nel CSS usando la regola fissa per impedirgli di scorrere sullo schermo.

 header background-color: # deb500; position: fixed; z-index: 2; top: 0; a sinistra: 0; width: 100%; altezza: 45px; padding: 0;  footer background-color: # c27b00; position: fixed; z-index: 2; bottom: 0; a sinistra: 0; width: 100%; altezza: 48px; padding: 0; border-top: 1px solid # 444;

Se non si conosce la differenza tra posizionamento fisso e posizionamento assoluto, la versione breve è che il posizionamento assoluto è una posizione definita rispetto all'elemento principale. Il posizionamento fisso è una posizione fissa all'interno del viewport.

Ora avrai un'area di scorrimento con intestazione e piè di pagina fissi, senza l'uso di Javascript!

Il futuro

Sarà bello quando gli altri browser giocheranno (Windows Phone ti sto guardando!) E la maggior parte degli utenti è su un sistema operativo Android più alto di 2.1, ma nel prossimo futuro dovresti vedere alcuni miglioramenti sui browser basati sul webkit. Con l'aumentare della velocità su ogni iterazione, le app realizzate con tecnologie basate sul web potrebbero superare rapidamente le applicazioni native. Tutto ciò di cui abbiamo bisogno ora sono più API native!

Dove viene lasciato iScroll?

iScroll ha ancora un posto al momento. Ci sono molti parametri che possiamo passare attraverso il metodo di scorrimento per dare alcune opzioni aggiuntive al modo in cui funziona il nostro scorrimento e aspetti che non possono essere attualmente raggiunti senza scrivere JavaScript personalizzato? quindi perché non usare ciò che è già disponibile?

C'è anche il problema del supporto del browser. Forse hai davvero bisogno delle barre degli strumenti fisse per il tuo progetto nelle vecchie implementazioni del browser webkit. Bene, nessun problema Se è la cosa migliore per il progetto, non c'è motivo di vergognarsi nell'usare una delle librerie JavaScript esistenti per raggiungerlo. Tuttavia, suggerirei di utilizzare l'implementazione nativa ogni volta che è possibile.

Oltre alla semplice funzionalità di scrolling, la libreria iScroll offre anche alcune funzionalità aggiuntive come "Pull To Refresh", "Pinch / Zoom" e "SNAP / Snap to Element". Possiamo occuparcene in un successivo tutorial di iScroll, poiché sono comunque utili e pertinenti.

Codice