Custom Scrollbars Mixin

Avatar of Kitty Giraudel
Kitty Giraudel on (Updated on )

Scrollbars are one of those UI components that are present on almost every page of the internet, yet we (developers) have little to no control over it. Some browsers give us the ability to customize their appearance but for most browsers including Firefox it just is not possible.

There has been some updates and standardization to styling scrollbars. See The Current State of Styling Scrollbars for the lastest, which you could port to a mixin.

Still, Chrome and Internet Explorer (yes) make it possible for us to define custom styles for scrollbars. However the syntax horribly complex, and of course, definitely not standard. Welcome to the proprietary world. This is why you might want to have a little mixin to easily customize your scrollbars. Right?

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

Usage:

body {
  @include scrollbars(10px, pink, red);
}
.custom-area {
  @include scrollbars(.5em, slategray);
}

Example

Going further

On both browsers, there are many more options than just color and size. However, they are often overlooked so I don’t think it is worth overcrowding the mixin with these options. Feel free to build a more advanced mixin with extra options.

Further readings: