Dacă ați ținut pasul cu lucrul pe care la făcut ZURB cu Fundația pentru aplicații, este posibil să fi observat că majoritatea șabloanelor demo au niște panouri derulante.

Acestea sunt destul de uimitoare - în special pentru aplicațiile hibride. Amintiți-vă cât au fost cadrele utile înainte de a ieși din stil? Ei bine, acum puteți avea această funcție înapoi, dar într-un mod receptiv.

După unele tinkering am reușit să scoatem funcția de bază a acestor panouri și asta vom învăța cum să recreăm astăzi.

1. Începeți la început

Vom începe cu niște markupuri de bază. Partea cea mai importantă este un container de împachetare pentru a împacheta întreaga pagină.

 
  
 
Conţinut
 
 lipsum ... 
 
 
 

2. CSS

Lucrurile devin interesante în CSS destul de repede. În primul rând, dorim noi html și corp selectori de a fi înălțime: 100%. Facem asta pentru a configura .împacheta element la care vom seta înălțime: 100vh. Cu unitatea vh spunem că vrem ca această aplicație să preia înălțimea completă a ferestrei de vizualizare, astfel încât elementele conținute în ea să fie forțate să deruleze. 

De asemenea, vom seta .împacheta a fi afișare: flex astfel încât să putem da elemente de copii a contracta proprietate.

html, corp înălțime: 100%;  .wrap height: 100vh; afișaj: flex; 

Notă: În loc să vă amintiți toate diferitele sintaxe pentru Flexbox de-a lungul anilor, încercați să utilizați Autoprefixer. Apoi, trebuie doar să utilizați sintaxa W3C spec și va face restul pentru a sprijini cât mai multe browsere posibil.

3. Obținerea flexibilității

Acum, că avem această "coajă", putem începe să stylizăm elemente flexibile în ea. Singurul truc este să vă asigurați că ați stabilit aceste elemente pentru copii overflow-y: derulați pentru a impune o bară de derulare.

principala flex: 1; afișaj: flex;  în afară, articolul overflow-y: scroll; padding: 2em;  în afară flex: 1;  articol flex: 2; 

4. Obținerea unui răspuns

Să mergem cu un pas mai departe și să facem site-ul să răspundă prin stivuirea bara laterală deasupra zonei de conținut pentru dispozitivele mai mici. Este la fel de ușor ca adăugarea unei reguli CSS în cadrul unei interogări media.

@media (max-width: 800px) principal flex-direction: column; 

Concluzie

Acești pași ar trebui să fie suficienți pentru a începe să utilizați această tehnică pe site-urile dvs. web. Acum că știu cum să o fac, găsesc tot felul de locuri pentru a pune aceste panouri scrollabile.

Pentru a vedea acest lucru în mod corespunzător, verificați demo-ul de pe Codepen. De asemenea, aruncați o privire asupra redesenării neoficiale Stylus pe care am construit-o folosind această tehnică.

Cum vă vedeți cum îl folosiți?