How to change the scroll-bar style in css
18,715
Solution 1
Check here . You can also check this link.
Use css like this
html {
background: lightgrey;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
background: whitesmoke;
overflow: scroll;
width: 80%;
max-width: 600px;
margin: 0 auto;
padding: 3em;
font: 100%/1.4 serif;
border: 1px solid rgba(0,0,0,0.25)
}
p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar {
width: 0.2em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid red;
}
Solution 2
You can try like this,
body {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
One more EXAMPLE with hover effect.
Related videos on Youtube
Author by
Admin
Updated on June 04, 2022Comments
-
Admin almost 2 years
How can I change the scroll bar style in
css
or change the different UI in chrome or any browser. I have seen many sites with different user interfaces.
Can this be done withcss
orhtml
?-
Jon almost 9 yearsWith CSS3 you can achieve this. You might find this article helpful.
-