[codepenembed height=”300″ themeid=”16787″ slughash=”ezBgOq” defaulttab=”result” user=”brandonhimpfen”]See the Pen Custom Scrollbar Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed]In the above example, the custom scrollbar has a gray background colour and black foreground colour.

The following is a Sass mixin that will allow your website or blog to have a custom scrollbar.

// Custom Scrollbar Sass Mixin
// See http://www.himpfen.com/custom-scrollbar-sass-mixin/
// Usage: @include scrollbar(width, foreground colour, background colour);
// Example: @include scrollbar(1.5em, #eee, #000);
// --------------------------------------------------

@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;
  }
}

Now, to use the Sass mixin, the code would be:

@include scrollbar(width, foreground colour, background colour);

Where width is the width of the scrollbar, foreground colour is the colour of the foreground and background colour is the colour of the background. The background colour is not required. If you don’t state the background colour, a white background colour will be used.

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