Se hai seguito il lavoro che ZURB ha fatto con Foundation for Apps, potresti aver notato che la maggior parte dei loro modelli demo ha dei pannelli scorrevoli piuttosto eleganti.

Questi sono davvero sorprendenti, specialmente per le app ibride. Ricorda quanto erano pratici i telai prima che passassero di moda? Bene, ora puoi riavere quella funzionalità, ma in modo reattivo.

Dopo alcuni tentativi sono riuscito a tirare fuori la funzionalità di base di questi pannelli e questo è quello che impareremo a ricreare oggi.

1. Inizia dall'inizio

Inizieremo con un markup piuttosto semplice. La parte più importante è un contenitore di avvolgimento per avvolgere l'intera pagina.

 
  
 
Soddisfare
 
 lipsum ... 
 
 
 

2. CSS

Le cose si fanno interessanti nel CSS abbastanza rapidamente. Primo, vogliamo il nostro html e corpo selettori di essere altezza: 100%. Lo stiamo facendo per configurare il .avvolgere elemento su cui ci concentreremo altezza: 100 vh. Con l'unità vh stiamo dicendo che vogliamo che questa app occupi l'intera altezza del viewport in modo che gli elementi contenuti al suo interno siano costretti a scorrere. 

Imposteremo anche .avvolgere essere display: flex quindi possiamo dare elementi ai bambini a flettere proprietà.

html, body height: 100%;  .wrap height: 100vh; display: flex; 

Nota: Invece di ricordare tutte le varie sintassi per Flexbox nel corso degli anni, prova ad utilizzare Autoprefixer. Quindi è sufficiente utilizzare la sintassi delle specifiche W3C e farà il resto per supportare quanti più browser possibile.

3. Ottenere flessibile

Ora che abbiamo questa configurazione "shell" possiamo iniziare a disegnare elementi di flex molto standard. L'unico trucco è assicurarsi di impostare questi elementi figli overflow-y: scroll per far rispettare una barra di scorrimento.

main flex: 1; display: flex;  a parte, article overflow-y: scroll; imbottitura: 2em;  aside flex: 1;  article flex: 2; 

4. Diventando reattivo

Facciamo un ulteriore passo in avanti e rendiamo il nostro sito reattivo impilando la barra laterale in cima all'area del contenuto per dispositivi più piccoli. È facile come aggiungere una regola CSS all'interno di una query multimediale.

@media (larghezza massima: 800px) main flex-direction: column; 

Conclusione

Questi passaggi dovrebbero essere sufficienti per iniziare a utilizzare questa tecnica nei tuoi siti web. Ora che so come farlo, sto trovando tutti i tipi di posti dove mettere questi pannelli scorrevoli.

Per vedere questo in azione correttamente, controlla la demo su Codepen. Inoltre, dai un'occhiata alla riprogettazione non ufficiale di Stylus che ho costruito usando questa tecnica.

Come ti vedi a usarlo?