Share
Dieser Tipp hilft Ihnen dabei, das Erscheinungsbild der Bildlaufleisten an Ihr UI-Design anzupassen. Wir werden einen Blick darauf werfen, was WebKit-Browser uns in Bezug auf CSS anbieten, und wir verwenden einen jQuery-Fallback, um auf andere Browser zu reagieren.
Wenn Sie Hilfe beim Gestalten einer bestimmten Komponente Ihrer Website benötigen, kann es schneller sein, dass Sie von einem Fachmann Hilfe erhalten. Envato hat Experten, die beim Umgestalten oder Anpassen von Webkomponenten aller Art behilflich sind.
Wenn wir auf Webkit-basierte Browser verweisen, sprechen wir im Wesentlichen von Apple Safari und Google Chrome. Zusammen halten sie derzeit mehr als 40% des gesamten Markts für Desktop-Browser. Bei Tablets verwendet Apples iPad immer Webkit, unabhängig davon, welcher Browser des Unternehmens verwendet wird. Google hat außerdem Chrome zu seinem Android-Betriebssystem hinzugefügt. Chromebooks basieren natürlich auf Google Chrome.
Wenn Sie diese Zahlen betrachten, sollte das Bildlaufleisten-Styling eine glänzende Zukunft haben!
Bevor wir mit dem eigentlichen Thema des Gestaltens von Bildlaufleisten mit CSS beginnen können, benötigen wir eine funktionale Demo. eine Seite mit Bildlaufleisten. Bildlaufleisten sind sichtbar, wenn:
Accentsconagua
Textbereich enthält genügend Text, damit Bildlaufleisten angezeigt werden.iframe wird verwendet, um eine andere Seite anzuzeigen.div oder ein anderes Blockelement hat seine Überlauf Eigenschaftssatz.Für diese Demo gehen wir zur letzten Option. Hier ist meine erste Auszeichnung:
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Curabitur rhoncus tortor und Orci Fringilla ohne Semper Magna Aliquet. Aliquam convallis elit sem. Proin Fringilla Fermentum Pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea diktumst. In bei Felis Massa. Lebenslauf von Männern und Frauen in Spanien. Nullam ante felis, ullamcorper suscipit felis. Maecenas sitzen amis nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Klasse Aptent Taciti Sociosqu Ad Litora Pro Conubia Nostra Per Inceptos Himenaeos.
Sed sed tellus dolor, nicht lobortis felis. Klasse Aptent Taciti Sociosqu Ad Litora Pro Conubia Nostra Per Inceptos Himenaeos. In nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum und neque. Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Sedibet Aliquet Vestibulum. Curabitur viverra tortor augue, ein Aliquet Tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim und feugiat tortor sagittis eu. Cras convallis felis und leo tempus und Fermentum urna accumsan. In quis metus bei metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.
Praesent sodales, Sapien sitzen unter Congue-Egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, Pharetra quis lacus. Morbi Tempus Pretium Nisi Sed Pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, jedoch nicht in Position gebracht. Cras elit orci, Fahrzeug in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing Adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.
Sed mollis justo enim, aber pharetra nunc. Fusce vehicula viverra magna und fringilla lectus porta quis. Donec eu fermentum mi. Donec argumentiert mit pellentesque iaculis. Phasellus est leo, Cursus und Consistetur tristique sitzen am Tortor. Cras eleifend felis sitzen in einem Aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Aliquam follat sodales lorem, ang Dignissim turpis pharetra et al. Nullam commodo hendrerit elementum. Donec porta faucibus ligula nicht blandit. In ultrices vehicula pretium.
Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget belästigung. Vivamus in massa arcu, aber auctor tellus. Aliquam convallis lobortis magna, aber es ist ein Odio euismod ac. Vestibulum enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue porta libero, id viverra nisl elit in mauris. Aenean Quis Risus ante. Donec bibendum wurde in einem Sem Vestibulum von Aliquet Lectus Tincidunt erstellt. Vivamus imperdiet congue leo, keine ultrarnosen urna sodales sed. Pellentesque habitant morbi tristique senectus et netus und malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, fizcibus placerat tincidunt vitae, Fahrzeug bei libero.
Es ist nur eine div mit viel Dummy-Inhalt. Und hier ist das anfängliche CSS, das einige feste Dimensionen festlegt und sowohl horizontale als auch vertikale Bildlaufleisten auslöst:
.Behälter Breite: 400px; Höhe: 300px; Hintergrundfarbe: #DCDCDC; Überlauf: blättern; / * Bildlaufleisten anzeigen * /
Sie sollten in der Lage sein, etwas Ähnliches zu sehen:
Vor einiger Zeit (mehrere Jahre) wurden CSS-Pseudoelemente in Webkit-Browsern eingeführt, um auf Bildlaufleisten zu zielen. Dies bietet die Möglichkeit, Ihre Seite nach Ihrem Thema zu gestalten.
Gestalten wir etwas mit dem -Webkit- Präfix und die benutzerdefinierten Bildlaufleisten-Eigenschaften des Webkits. Denken Sie daran, dass ich mich an die grundlegenden CSS-Eigenschaften halte, um das Verständnis zu erleichtern und Erklärungen in Kommentaren enthalten.
:: - webkit-scrollbar width: 15px; / * Dies zielt auf die Standard-Bildlaufleiste (obligatorisch) * /
Wenn dieses Pseudoelement vorhanden ist, deaktiviert WebKit die eingebaute Bildlaufleiste und verwendet einfach die in CSS bereitgestellten Informationen. - Surfin 'Safari
Und nun zu einigen anderen Pseudoelementen:
:: - webkit-scrollbar-track background-color: # b46868; / * Die neue Bildlaufleiste wird mit der eingestellten Hintergrundfarbe flach dargestellt * / :: - webkit-scrollbar-thumb background-color: rgba (0, 0, 0, 0.2); / * Damit wird der Daumen formatiert und der Track ignoriert. * / :: - webkit-scrollbar-button background-color: # 7c2929; / * Optional können Sie die oberen und unteren Schaltflächen (links und rechts für horizontale Balken) formatieren. * / :: - webkit-scrollbar-corner Hintergrundfarbe: schwarz; / * Wenn sowohl der vertikale als auch der horizontale Balken angezeigt wird, muss möglicherweise auch die rechte untere Ecke gestylt werden. * /
Nach dem Hinzufügen dieses CSS sollten Sie den folgenden Effekt sehen können (wieder nur Webkit-Browser)..
Das ist richtig - IE war der erste Browser, der das Styling von Bildlaufleisten durch CSS unterstützt hat. Das war in den Tagen von IE 5.5, aber nur die Farbe kann geändert werden.
Diese Eigenschaften können noch heute verwendet werden. Sehen Sie sich diese einzelne Eigenschaft im IE 9 zu Demonstrationszwecken an:
body scrollbar-face-color: # b46868;
Sehen Sie, wie es aussehen würde:
Genug über WebKit. Firefox, IE und Opera können ebenfalls mitmachen. Für sie gibt es einen sehr schönen Fallback-Ansatz in Form von jScrollPane. Dieses jQuery-Plugin wurde von Kelvin Luck entwickelt und ist unser Retter für den Tag.
Die Website von Kelvin enthält viele gute Beispiele, aber für die grundlegende Verwendung müssen wir nur jQuery und die jScrollPane-Dateien herunterladen und auf folgende Weise implementieren:
Nur um unser Thema zu erreichen, öffnen wir es jquery.jscrollpane.css und bearbeiten Sie die folgenden Zeilen mit unseren Farbwerten (für Leistungsverbesserungen möchten Sie möglicherweise alle Stile in Ihren eigenen Dateien platzieren):
.jspTrack background: # b46868; / * geändert von #dde * / position: relativ; .jspDrag Hintergrund: rgba (0,0,0,0,2); / * geändert von #bbd * / position: relativ; oben: 0; links: 0; Cursor: Zeiger;
Hier ist ein Screenshot von dem, was Sie in Firefox sehen werden:
Web-Apps wie Google Mail und Google+ (zusammen mit vielen anderen Beispielen) haben die Idee bereits angenommen und wenn diese Dynamik anhält, werden Firefox und IE möglicherweise auch eigene Lösungen bereitstellen.
Ich hoffe, Ihnen hat dieser Quick Tip gefallen und ich freue mich darauf, zu sehen, was Sie in Ihrer Designarbeit mit Bildlaufleisten machen!
Wenn Sie nach einer vorgefertigten Lösung suchen, bietet Envato Market eine Auswahl an Bildlaufleisten, die Sie in Ihre Website einfügen können, um eine Reihe von Effekten zu erzielen. Hier einige davon:
Lazybars ist ein benutzerfreundliches, inhaltsfähiges jQuery-Plugin für Bildlaufleisten. Sie können diese Bildlaufleisten implementieren, indem Sie einem Bildlaufelement Ihrer Website einen Klassennamen hinzufügen.
Verwenden Sie die mit Lazybars gebündelten Motive oder erstellen Sie Ihre eigenen mit einfachem CSS.
Lazybars - Themes responsives Scrollbar-jQuery-Plugin"Fancy Scrollbar - WordPress" ist ein Plugin, mit dem eine benutzerdefinierte Bildlaufleiste auf WordPress-Sites erstellt werden kann. Es gibt viele Anpassungsmöglichkeiten. Sie können Farbe, Effekte, Bildlaufverzögerung, Schienenstreifen und viele weitere Parameter anpassen.
Fancy Scrollbar - WordPressAwesome Custom Scrollbar ist ein anpassbares jQuery-Plugin für Ihre WordPress-Website. Mit diesem Plugin können Sie die Bildlaufleiste Ihrer Webseite anpassen und die benutzerdefinierte Bildlaufleiste per Shortcode an beliebiger Stelle einbetten, sogar in Themendateien.
Tolle benutzerdefinierte BildlaufleisteDZS Scroller bietet eine Bildlaufleiste für Ihre Site, die Sie ganz einfach über CSS anpassen können, wenn die drei enthaltenen Skins nicht ausreichen. Es verfügt auch über eine erweiterte Funktionalität, z. Und es funktioniert auf iPhone / iPad.
DZS ScrollerEs ist einfach, die schöne und farbenfrohe CSS3-Bildlaufleiste für Ihre Website zu verwenden. Fügen Sie einfach die vorhandene CSS-Datei ein und genießen Sie die neue CSS3-Bildlaufleiste.
CSS3 Scrollbar-Stile
