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:
- Only Internet Explorer could do (ancient versions) with stuff like
-ms-scrollbar-base-color
. These do not exist anymore. - 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. - Now, we have standards that can style the options which are covered by un-prefixed properties like
scrollbar-color
andscrollbar-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
Only supports styling scrollbar colors through proprietary prefixed properties, no other properties to define the scrollbar's appearance. (not on the standards track)
Supports scrollbar styling via CSS pseudo-properties. (not on the standards track)
Scrollbar styling doesn’t work in WKWebView
Can be enabled by setting the layout.css.scrollbar-colors.enabled and layout.css.scrollbar-width.enabled flags to true.
Firefox 63 supported scrollbar-face-color and scrollbar-track-color seperate properties (now dropped from the spec) instead of unified scrollbar-color property.
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
Specification (drafts.csswg.org)
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
Top comments (0)