Change the color of the scrollbar

Written by @kerixa 21 August 2012

Giving a special style to different elements of the site makes your website look more beautiful. In the following code, a custom scroll bar has been designed. This element has been customized, and the size, appearance and color of the scroll bar itself, and its background color has changed. This can be a good option for designing a scroll bar to match the theme of the website which makes your website more beautiful.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->

<style>
html {
    --scrollbarBG: #2d86ad;
    --thumbBG: #041d29;
}

body::-webkit-scrollbar {
    width: 11px;
}

body {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

body::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
}


html {
    background: lightgrey;
    overflow: hidden;
}

body {
    height: 100vh;
    background: whitesmoke;
    overflow-y: auto;
    margin: 0 auto;
    padding: 2rem;
    font: 100%/1.4 serif;
    border: 1px solid rgba(0, 0, 0, 0.25)
}

p {
    margin: 0 0 1.5em;
}

* {
    box-sizing: border-box;
}
</style>

<p>HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>

<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>

<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>

<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<p> HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com! HtmlFreecode.com!</p>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

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!

Comments

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

0 / 300