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:
Nice post but need a demo of custom scrollbar i found a good tutorial on TalkersCode.com to create a custom scrollbar using css with demo http://talkerscode.com/webtricks/create-your-own-custom-scrollbars-using-css-and-html.php
Hi,
Styles for scroll bar thumb and track can only be done in webkit based browsers.
Since IE is not a webkit based browser we scroll bar thumb and track cant be styled
Hi,
Can some one help how to make scroll bar appears in windows only on mouse over like on Mac OS(on top of content a transparent one) ?