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

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.

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:

1

<div class="container">

2

3

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

4

5

    <p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>

6

7

    <p>Praesent sodales, sapien sit amet 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, ut consequat nisi posuere id. Cras elit orci, vehicula 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.</p>

8

9

    <p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>

10

11

    <p>Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.</p>

12

13

</div>

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:

1

	.container {

2

		  width: 400px;

3

		  height: 300px;

4

		  background-color: #DCDCDC;

5

		  overflow: scroll; /* showing scrollbars */

6

	}

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.

1

	::-webkit-scrollbar {

2

		  width: 15px;

3

	} /* this targets the default scrollbar (compulsory) */

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:

1

	::-webkit-scrollbar-track {

2

		  background-color: #b46868;

3

	} /* the new scrollbar will have a flat appearance with the set background color */

4

5

	::-webkit-scrollbar-thumb {

6

		  background-color: rgba(0, 0, 0, 0.2); 

7

	} /* this will style the thumb, ignoring the track */

8

9

	::-webkit-scrollbar-button {

10

		  background-color: #7c2929;

11

	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

12

13

	::-webkit-scrollbar-corner {

14

		  background-color: black;

15

	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

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:

1

  body {

2

      scrollbar-face-color: #b46868;

3

  }

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:

1

	<!-- this cssfile can be found in the jScrollPane package -->

2

	<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

3

4

	<!-- latest jQuery direct from google's CDN -->

5

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

6

	<!-- the jScrollPane script -->

7

	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

8

9

	<!--instantiate after some browser sniffing to rule out webkit browsers-->

10

	<script type="text/javascript">

11

12

	  $(document).ready(function () {

13

	      if (!$.browser.webkit) {

14

	          $('.container').jScrollPane();

15

	      }

16

	  });

17

18

	</script>

19

20

</body>

Ö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):

1

	.jspTrack

2

	{

3

		background: #b46868; /* changed from #dde */

4

		position: relative;

5

	}

6

7

	.jspDrag

8

	{

9

		background: rgba(0,0,0,0.2); /* changed from #bbd */

10

		position: relative;

11

		top: 0;

12

		left: 0;

13

		cursor: pointer;

14

	}

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

• Benutzerdefinierte Bildlaufleisten in WebKit von Chris Coyier
• Styling-Bildlaufleisten auf webkit.org

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.

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.

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.

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.

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.