CODEWITHSUNDEEP
htmlcss
Suman
Suman

Reputation: 76

how to customize scroll bars with html and css

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

Upvotes: 3

Views: 15062

Answers (3)

SreYash
SreYash

Reputation: 111

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>

Upvotes: 0

Love Trivedi
Love Trivedi

Reputation: 4046

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); 
}

Upvotes: 9

SKeurentjes
SKeurentjes

Reputation: 1878

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.

Upvotes: 0

Related Questions