Make your scrollbar colorful

Written by @kerixa 21 August 2012

When we want the appearance of our website to be different from other websites, we can use a different style for scroll bars. In this code, clicking on any of the 3 tabs at the top of the page will change the color of the scroll bar. In one it turns red, in the other it turns green and in the other it turns blue. This code is useful to make your website fancy

Code Snippet:

                                                <!-- this script is provided by coded by: Kerixa Inc. -->

.outer::-webkit-scrollbar {
    width: 20px;

.outer::-webkit-scrollbar-track {
    background: #ccc;

.outer::-webkit-scrollbar-thumb {
    background: tomato;

/* basic styles */
html, body {
    background: #000;
    color: #111;
    font-size: 19px;

.outer {
    height: 350px;
    max-width: 400px;
    margin: 0 auto;
    overflow-y: scroll;
    background: #fff;
    padding: 15px;

.inner {
    height: 150%;

.buttons {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;

button {
    background: none;
    border: none;
    color: white;
    flex: 1 auto;

[value$=f00] {
    background: #f00;

[value=green] {
    background: green;

[value=dodgerblue] {
    background: dodgerblue;

<div class="buttons">
	<button value="#f00">red</button>		
	<button value="green">green</button>
	<button value="dodgerblue">blue</button>

<div class="outer">
	<div class="inner">
		<span>Pick a color above to change Scrollbar color. Chrome only!</span>

<script src=''></script>
(function () {

var color, picker, new_stylesheet;

$('button').click(function getcolor() {
    color = $(this).val();
    picker = ".outer::-webkit-scrollbar-thumb {background:" + color + ";}";
    new_stylesheet = "<style type='text/css' id='currentCSS'>" + picker + "</style>";

    existingStylesheet = $("#currentCSS");

    if (existingStylesheet.length) {
    } else {

<a target='_blank' href='' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!



Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

Online Users: 12
Recent Members: admin_js, bloxio, yqaice, flooketsu, phuang_test
advertisement 2