Custom Scrollbar Sass Mixin

See the Pen Custom Scrollbar Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen.20918

The following is a Sass mixin that will allow you to customize the browser’s scrollbar.

// @include scrollbars(.5em, foreground, background);
@mixin scrollbar($size, $foreground-colour, $background-colour: mix($foreground-colour, white, 50%)) {
 // For Google Chrome
 ::-webkit-scrollbar {
 width: $size;
 height: $size;
 }

::-webkit-scrollbar-thumb {
 background: $foreground-colour;
 }

::-webkit-scrollbar-track {
 background: $background-colour;
 }
 
 body {
 scrollbar-face-color: $foreground-colour;
 scrollbar-track-color: $background-colour;
 }
}

All you have to do now is include it in your project using the following code.

@include scrollbars(width, foreground, background);

Where width is the width of your scrollbar, foreground is the foreground colour of your scrollbar and background is the background colour of your scrollbar.

Usage example would be:

@include scrollbar(1.5em, #eee, #000);

Leave a Reply

Your email address will not be published. Required fields are marked *