CSS3 Custom scrollbar

The scrollbar feature on the website is common nowadays. You will find them on major websites and blogs, mostly on personal websites. There are different jQuery plugins that can create awesome scrollbar effects.

But there is a way we can style our scrollbar just using the CSS3 properties.

A brief history of styling scrollbars:

1. Only Internet Explorer could do (ancient versions) with stuff like -ms-scrollbar-base-color. These do not exist anymore.
2. Then WebKit-based browser engines got on board with stuff like ::-webkit-scrollbar. That's what this Alamanac entry mostly covers, as it works across the Safari/Chrome landscape today.
3. Now, we have standards that can style the options which are covered by un-prefixed properties like scrollbar-color and scrollbar-width.

So, I have created a simple SCSS mixin for easy use.

Basic implementation of creating scrollbar

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: red green;
  scrollbar-width: thin;
}

scrollbar.scss

@mixin scrollbars($size, $front-color, $back-color) {
  // For Google Chrome
  &::-webkit-scrollbar {
    width:  $size;
    height: $size;
  }

  &::-webkit-scrollbar-thumb {
    background: $front-color;
  }

  &::-webkit-scrollbar-track {
    background: $back-color;
  }

  // For Internet Explorer
  & {
    scrollbar-face-color: $front-color;
    scrollbar-track-color: $back-color;
  }
}

Usage

.targeted-scroll-area {
  @include scrollbars(4px, #83a5ee, #e8f0fd);
}

Compiled CSS

.targeted-scroll-area::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.targeted-scroll-area::-webkit-scrollbar-track {
    background: #e8f0fd;
}

.targeted-scroll-area::-webkit-scrollbar-thumb {
    background: #83a5ee;
}

.targeted-scroll-area {
    scrollbar-face-color: #83a5ee;
    scrollbar-track-color: #e8f0fd;
}

Browser Support

Checkout caniuse for more information

Here are some risks too. Please be careful about that

1. Only supports styling scrollbar colors through proprietary prefixed properties, no other properties to define the scrollbar's appearance. (not on the standards track)

2. Supports scrollbar styling via CSS pseudo-properties. (not on the standards track)

3. Scrollbar styling doesn’t work in WKWebView

4. Can be enabled by setting the layout.css.scrollbar-colors.enabled and layout.css.scrollbar-width.enabled flags to true.

5. Firefox 63 supported scrollbar-face-color and scrollbar-track-color seperate properties (now dropped from the spec) instead of unified scrollbar-color property.

6. Firefox neither supports light and dark values of scrollbar-color nor values of scrollbar width

But for quick use especially on our personal projects, we can try these properties. It's fun to explore and test these properties.

Resources

1. css-tricks

2. Specification (drafts.csswg.org)

3. Tutorial for IE & WebKit/Blink browsers

4. jQuery custom content scroller

5. Minimal custom scrollbar plugin

6. Firefox support bug

7. Stackoverflow article discussiong cross-browser support

8. Webkit blog post describing their non-standard support

Conclusion

By coming this far you can use the scrollbars scss mixins that can help you to style awesome scrollbars. So I suggest you give it a try in your project and enjoy!

If you have found this blog very helpful then please feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers