Want to make your existing scrollbar beautiful, responsive and matching with the theme of your blog? Yes! you could too build it without using any JavaScript and only with a little bit of CSS.
Before moving further, the sad part is this CSS will not be effective in Firefox and IE or Microsoft Edge.
So you have to copy above CSS code and paste it into <style> tag of your HTML page and that's it is!
And don't forget to make any changes in code. You can always change color, add radius and add buttons up and down the scrollbar.
Add hover property to make a realistic effect and you can also add smooth transitions to this.
There are currently 7 properties in which you can stylize your scrollbar. They are -
Before moving further, the sad part is this CSS will not be effective in Firefox and IE or Microsoft Edge.
So you have to copy above CSS code and paste it into <style> tag of your HTML page and that's it is!
And don't forget to make any changes in code. You can always change color, add radius and add buttons up and down the scrollbar.
Add hover property to make a realistic effect and you can also add smooth transitions to this.
There are currently 7 properties in which you can stylize your scrollbar. They are -
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track
::-webkit-scrollbar-track
::-webkit-scrollbar-track
::-webkit-scrollbar-trackAny extra info and examples of this are, of course, available on W3Schools.
0 Please Share a Your Opinion.:
Comment something useful and creative :)