Mixin für benutzerdefinierte Scrollleisten

Scrollleisten sind eine dieser UI-Komponenten, die auf fast jeder Seite im Internet vorhanden sind, doch wir (Entwickler) haben wenig bis keine Kontrolle darüber. Einige Browser geben uns die Möglichkeit, ihr Aussehen anzupassen, aber für die meisten Browser, einschließlich Firefox, ist dies einfach nicht möglich.

Es gab einige Updates und Standardisierungen für die Gestaltung von Scrollleisten. Sehen Sie The Current State of Styling Scrollbars für die neuesten Informationen, die Sie in ein Mixin portieren könnten.

Dennoch machen Chrome und Internet Explorer (ja) es uns möglich, benutzerdefinierte Stile für Scrollleisten zu definieren. Die Syntax ist jedoch schrecklich komplex und natürlich definitiv nicht standardisiert. Willkommen in der proprietären Welt. Deshalb möchten Sie vielleicht ein kleines Mixin haben, um Ihre Scrollleisten 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

Weiter geht's

In beiden Browsern gibt es viele weitere Optionen als nur Farbe und Größe. Diese werden jedoch oft übersehen, daher glaube ich nicht, dass es sich lohnt, das Mixin mit diesen Optionen zu überladen. Fühlen Sie sich frei, ein fortgeschritteneres Mixin mit zusätzlichen Optionen zu erstellen.

Weitere Lektüre

• Inset & Angepasste WebKit Scrollleiste
• Benutzerdefinierte Scrollleisten in Webkit
• Benutzerdefinierte Scrollleisten für IE und Chrome mit CSS