chirag patel chirag patel - 10 months ago 51
Javascript Question

Change a scroll bar style

Please refer this link for the example: CLICK HERE

I am using a below css for change the scroll bar:

/* For the "inset" look only */
html {
overflow: auto;
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: scroll;

/* Let's get this party started */
::-webkit-scrollbar {
width: 6px;

/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 6px;
border-radius: 6px;

/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 6px;
border-radius: 6px;
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);

This css only change the width of the y scroll , how can i change a width of the x scroll.

Please help me to solve this issue.

Answer Source


Use ::-webkit-scrollbar {width: 6px; height: 6px;}

Check demo.

Also note that CSS based scrollbars are not suitable for all browsers. So, my recommendation would be to go for js based scrollbars.

I prefer jquery.nicescroll