Wenn Sie mit der Arbeit, die ZURB mit Foundation for Apps erledigt hat, Schritt gehalten haben, haben Sie vielleicht bemerkt, dass die meisten Demo-Vorlagen über einige hübsche, scrollbare Bedienfelder verfügen.

Diese sind eigentlich ziemlich erstaunlich - vor allem für Hybrid-Apps. Erinnern Sie sich noch daran, wie handlich Frames waren, bevor sie aus der Mode kamen? Nun, jetzt können Sie diese Funktionalität wieder haben, aber auf eine ansprechende Weise.

Nach einigem Basteln konnte ich die Basisfunktionalität dieser Panels herausholen und das lernen wir heute, um sie neu zu erstellen.

1. Beginnen Sie am Anfang

Wir beginnen mit einem ziemlich einfachen Markup. Der wichtigste Teil ist ein Verpackungsbehälter, der die gesamte Seite einwickelt.

 
  
 
Inhalt
 
 Lippenum… 
 
 
 

2. CSS

Die Dinge werden im CSS ziemlich schnell interessant. Zuerst wollen wir unsere html und Karosserie Selektoren zu sein Höhe: 100%. Wir machen das, um das einzurichten .wickeln Element, auf das wir uns setzen Höhe: 100 Vh. Mit der Einheit vh sagen wir, dass diese App die volle Höhe des Ansichtsfensters einnehmen soll, sodass die darin enthaltenen Elemente zum Scrollen gezwungen werden. 

Wir werden auch setzen .wickeln sein Anzeige: Flex so können wir Kindern Elemente geben biegen Eigentum.

html, Körper Höhe: 100%;  .wrap height: 100vh; Anzeige: Flex; 

Hinweis: Anstatt sich all die verschiedenen Syntaxes für Flexbox im Laufe der Jahre zu merken, versuchen Sie es mit Autoprefixer. Dann müssen Sie nur die W3C-Spezifikationssyntax verwenden und den Rest erledigen, um so viele Browser wie möglich zu unterstützen.

3. Flexibel werden

Nun, da wir diese "Schale" eingerichtet haben, können wir damit beginnen, sehr standardisierte Flex-Elemente zu gestalten. Der einzige Trick besteht darin, sicherzustellen, dass Sie diese untergeordneten Elemente auf setzen Überlauf-y: blättern eine Bildlaufleiste erzwingen.

Haupt Flex: 1; Anzeige: Flex;  nebenbei Artikel overflow-y: scroll; Polsterung: 2em;  beiseite flex: 1;  article flex: 2; 

4. Reaktionsschnell werden

Lassen Sie uns noch einen Schritt weiter gehen und unsere Website reaktionsfähiger machen, indem Sie die Seitenleiste für kleinere Geräte auf den Inhaltsbereich stapeln. Es ist so einfach wie das Hinzufügen einer CSS-Regel in einer Medienabfrage.

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

Fazit

Diese Schritte sollten ausreichen, um diese Technik auf allen Websites zu verwenden. Nun, da ich weiß, wie es geht, finde ich alle möglichen Orte, um diese scrollbaren Panels zu platzieren.

Um dies richtig in Aktion zu sehen, schauen Sie sich die Demo von Codepen an. Schauen Sie sich auch das inoffizielle Stylus-Redesign an, das ich mit dieser Technik erstellt habe.

Wie sehen Sie sich damit??