chirag patel chirag patel - 1 month ago 5
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

DEMO:

http://plnkr.co/edit/bBEj9xa6TucnJq6scIsq?p=preview

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

Check demo.

http://plnkr.co/edit/bBEj9xa6TucnJq6scIsq?p=preview

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

https://github.com/inuyaksa/jquery.nicescroll

Comments