how to customize scroll bars with html and css

Question

how to change default scroll bar style to customized scroll bars,

is this possible to do with html and css without java script and j query

Thanks in Advance

Mukesh Ram · Accepted Answer · 2016-07-20 06:41:37Z

9

You can change color, but currently it's work only on webkit browsers.

::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);*/ 
    -webkit-border-radius: 10px;
    background-color:#fff;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:#666; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

edited Jul 20, 2016 at 6:41

Mukesh Ram

6,3684 gold badges21 silver badges37 bronze badges

answered Sep 18, 2013 at 11:56

Love Trivedi

4,0913 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SKeurentjes · Accepted Answer · 2013-09-18 11:53:56Z

0

It is possible in some browsers width only CSS.

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/

Else you have use javascript.

answered Sep 18, 2013 at 11:53

SKeurentjes

1,87812 silver badges19 bronze badges

Comments

SreYash · Accepted Answer · 2016-09-06 07:08:30Z

simple example

html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
 background: rgba(255,0,0,0.4);

<p>
During Roman times,
  there were many variant forms of the letter "A".
  First was the monumental or lapidary style, which was used when inscribing on stone or other "permanent" mediums.
  There was also a cursive style used for everyday or utilitarian writing,
  which was done on more perishable surfaces.
  Due to the "perishable" nature of these surfaces, 
  there as not as many examples of this style as there are of the monumental, but there are still many surviving examples of different types of cursive, such as majuscule cursive,
  minuscule cursive, and semicursive minuscule. 
  Variants also existed that were intermediate between the monumental and cursive styles. The known variants include the early semi-uncial,
  the uncial, and the later semi-uncial.[5]
</p>
<p>
 During Roman times, there were many variant forms of the letter "A". First was the monumental or lapidary style, which was used when inscribing on stone or other "permanent" mediums. There was also a cursive style used for everyday or utilitarian writing, which was done on more perishable surfaces. Due to the "perishable" nature of these surfaces, there as not as many examples of this style as there are of the monumental, but there are still many surviving examples of different types of cursive, such as majuscule cursive, minuscule cursive, and semicursive minuscule. Variants also existed that were intermediate between the monumental and cursive styles. The known variants include the early semi-uncial, the uncial, and the later semi-uncial.[5]</p>

Collectives™ on Stack Overflow

how to customize scroll bars with html and css

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related