Bildlaufleisten sind eine dieser UI-Komponenten, die auf fast jeder Seite des Internets vorhanden sind, aber wir (Entwickler) haben wenig bis gar keine Kontrolle darüber. Einige Browser bieten uns die Möglichkeit, ihr Erscheinungsbild anzupassen, aber für die meisten Browser, einschließlich Firefox, ist dies einfach nicht möglich.
Das Styling von Bildlaufleisten wurde aktualisiert und standardisiert. Die neuesten Informationen finden Sie unter Der aktuelle Status der Styling-Bildlaufleisten, die Sie auf ein Mixin portieren können.
Mit Chrome und Internet Explorer (ja) können wir jedoch benutzerdefinierte Stile für Bildlaufleisten definieren. Allerdings ist die Syntax schrecklich komplex und natürlich definitiv nicht Standard. Willkommen in der proprietären Welt. Aus diesem Grund möchten Sie möglicherweise ein kleines Mixin, um Ihre Bildlaufleisten einfach anzupassen. Richtig?
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )Verwendung:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Beispiel
Informationen zum Scrollen der Bildlaufleiste von Hugo Giraudel (@HugoGiraudel) auf CodePen finden Sie im Pen Sass-Mixin.
Weitergehen
In beiden Browsern gibt es viel mehr Optionen als nur Farbe und Größe. Sie werden jedoch oft übersehen, sodass ich nicht denke, dass es sich lohnt, das Mixin mit diesen Optionen zu überfüllen. Fühlen Sie sich frei, ein erweitertes Mixin mit zusätzlichen Optionen zu erstellen.
Weitere Lesungen:
- Eingefügte und angepasste WebKit-Bildlaufleiste
- Benutzerdefinierte Bildlaufleisten in Webkit
- Benutzerdefinierte Bildlaufleisten für IE und Chrome mithilfe von CSS