7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

Kurztipp: Gestalten Sie Bildlaufleisten so, dass sie zu Ihrem UI-Design passen

Scroll to top
Read Time: 8 mins

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Dieser Tipp hilft Ihnen dabei, das Erscheinungsbild von Bildlaufleisten an Ihr UI-Design anzupassen. Wir werden uns ansehen, was WebKit-Browser uns in Bezug auf CSS bieten, und wir werden einen jQuery-Fallback verwenden, um andere Browser zu bedienen.

Suchen Sie nach einer Verknüpfung?

Wenn Sie Hilfe beim Gestalten einer bestimmten Komponente Ihrer Website benötigen, können Sie schneller Hilfe von einem Fachmann erhalten. Envato verfügt über Experten, die Ihnen bei der Neugestaltung oder Anpassung aller Arten von Webkomponenten behilflich sind.

Web component services on Envato StudioWeb component services on Envato StudioWeb component services on Envato Studio

Kurzer Hinweis zu Browsern

Wenn wir uns auf Webkit-basierte Browser beziehen, sprechen wir im Wesentlichen von Apple Safari und Google Chrome. Zusammen halten sie derzeit mehr als 40% des gesamten Marktes für Desktop-Browser. Für Tablets verwendet das iPad von Apple immer das Webkit, unabhängig davon, welcher Browser des Unternehmens verwendet wird. Google hat auch Chrome zu seinem Android-Betriebssystem hinzugefügt, und Chromebooks basieren natürlich auf Google Chrome.

Wenn man sich diese Zahlen ansieht, muss das Styling der Bildlaufleisten eine sehr gute Zukunft haben!


Schritt 1: Eine einfache Seite mit Bildlaufleisten

Bevor wir mit dem eigentlichen Thema des Stils von Bildlaufleisten mit CSS beginnen können, benötigen wir eine funktionale Demo; eine Seite mit Bildlaufleisten. Bildlaufleisten können angezeigt werden, wenn:

  • Der Inhalt ist größer als der sichtbare Fensterbereich (rechts wird eine Bildlaufleiste angezeigt).
  • Ein textarea enthält so genügend Text, dass Bildlaufleisten angezeigt werden.
  • Ein iframe wird verwendet, um eine andere Seite anzuzeigen.
  • Für ein div oder ein anderes Blockelement ist die overflow eigenschaft festgelegt.

Für diese Demo werden wir mit der letzten Option gehen. Hier ist mein erstes Markup:

Es ist nur ein 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:

Sie sollten in der Lage sein, etwas Ähnliches zu sehen:


Schritt 2: Starten mit Webkit-Browsern

Vor einiger Zeit (mehrere Jahre) wurden CSS-Pseudoelemente in Webkit-Browsern eingeführt, um Bildlaufleisten auszurichten und die Möglichkeit zu bieten, Ihre Seite entsprechend Ihrem Thema zu gestalten.

Lassen Sie uns etwas stylen, indem wir das Präfix -webkit- und die benutzerdefinierten Bildlaufleisteneigenschaften des Webkits verwenden. Denken Sie daran, dass ich mich zum besseren Verständnis nur an die grundlegenden CSS-Eigenschaften halte, die in den Kommentaren erläutert werden.

When this pseudo element is present, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS. - Surfin' Safari

Und nun zu einigen anderen Pseudoelementen:

Nach dem Hinzufügen dieses CSS sollten Sie den folgenden Effekt sehen können (wieder nur Webkit-Browser).

Erraten Sie, was? Internet Explorer hat ein eigenes Scrollbar-Styling!

Das ist richtig - tatsächlich war IE der erste Browser, der das Stylen von Bildlaufleisten über CSS unterstützte. Dies war in den Tagen von IE 5.5, aber nur die Farbe kann geändert werden.

Diese Eigenschaften können noch heute genutzt werden; Schauen Sie sich diese einzelne Eigenschaft in IE 9 zu Demonstrationszwecken an:

Sehen Sie, wie es aussehen würde:


Schritt 3: Fallback für Non-Webkit-Browsers

Genug von WebKit. Firefox, IE und Opera können ebenfalls mitmachen. Für sie haben wir einen sehr schönen Fallback-Ansatz in Form von jScrollPane. Dieses jQuery-Plugin wurde von Kelvin Luck entwickelt und wird unser Retter für diesen Tag sein.

Die Website von Kelvin enthält viele gute Beispiele, aber für die grundlegende Verwendung müssen wir lediglich jQuery und die jScrollPane-Dateien herunterladen und auf folgende Weise implementieren:

Öffnen Sie zum Anpassen unseres Themas jquery.jscrollpane.css und bearbeiten Sie die folgenden Zeilen mit unseren Farbwerten (zur Leistungsverbesserung möchten Sie möglicherweise alle Stile in Ihren eigenen Dateien platzieren):

Hier ist ein Screenshot von dem, was Sie in Firefox sehen werden:


Abschluss

Web-Apps, wie Google Mail und Google+ (zusammen mit vielen anderen Beispielen) haben die Idee bereits aufgegriffen, und wenn diese Dynamik anhält, werden Firefox und IE möglicherweise auch ihre eigenen Lösungen anbieten.

Ich hoffe, Ihnen hat dieser Quick-Tipp gefallen und ich freue mich darauf zu sehen, was Sie mit Bildlaufleisten in Ihrer Designarbeit machen!


Weitere Ressourcen

Anpassbare Bildlaufleisten auf dem Envato Market

Wenn Sie nach einer vorgefertigten Lösung suchen, bietet Envato Market eine Auswahl an Scrollbars, die Sie in Ihre Website einfügen können, um eine Reihe von Effekten zu erzielen. Hier sind einige davon:

1. Lazybars - Themable Reaktionsschnelle Scrollbar jQuery Plugin

Lazybars ist ein einfach zu verwendendes, themenbezogenes jQuery-Plugin für die Bildlaufleiste. Sie können diese Bildlaufleisten implementieren, indem Sie jedem scrollbaren Element auf Ihrer Website einen Klassennamen hinzufügen.

Nutzen Sie die mit Lazybars gebündelten Themen oder erstellen Sie Ihre eigenen mit einfachem CSS.

Lazybars - Themeable responsive scrollbar jQuery pluginLazybars - Themeable responsive scrollbar jQuery pluginLazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Themable Reaktionsschnelle Scrollbar jQuery Plugin

2. Originelle Scrollbar - WordPress

"Fancy Scrollbar - WordPress" ist ein Plugin, das eine benutzerdefinierte Bildlaufleiste auf WordPress-Sites erstellen kann. Es hat viele Anpassungsoptionen. Sie können Farbe, Effekte, Bildlaufverzögerung, Schienenstreifen und viele weitere Parameter anpassen.

Fancy Scrollbar - WordPressFancy Scrollbar - WordPressFancy Scrollbar - WordPress
Originelle Scrollbar - WordPress

3. Fantastische benutzerdefinierte Scrollbar

Awesome Custom Scrollbar ist ein hochgradig anpassbares jQuery-Plugin für die benutzerdefinierte Bildlaufleiste 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, auch in Themendateien.

Awesome Custom ScrollbarAwesome Custom ScrollbarAwesome Custom Scrollbar
Fantastische benutzerdefinierte Bildlaufleiste

4. DZS Scroller

DZS 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 kommt auch mit erweiterten Funktionen wie Scrollen per Hover oder Fade beim Verlassen der Maus. Und es funktioniert auf iPhone/iPad.

DZS ScrollerDZS ScrollerDZS Scroller
DZS Scroller

5. CSS3-Scrollbarstile

Es ist einfach, die schöne und farbenfrohe CSS3-Bildlaufleiste für Ihre Website zu verwenden. Einfach in die vorhandene CSS-Datei einfügen und die neue CSS3-Bildlaufleiste genießen.

CSS3 Scrollbar StylesCSS3 Scrollbar StylesCSS3 Scrollbar Styles
CSS3-Scrollbarstile
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.