How to make body scroll bar Stylish on the right side for all browsers?

Question

I am creating a template. I want to change the design of the body default scroll bar on right side. I want to make it stylish in such way that it will work in all browsers.

I attached a screenshot of what i want. In screenshot you will see a styled scroll bar on the right side instead of default browser scroll bar.

enter image description here

Please someone guide me if it is possible and how we can perform this.

Best Regards

Ayyaz

I added a screenshot. please look at screenshot. you will get what i want. — Ayyaz Zafar, May 17 '13 at 14:13

score 1 · Answer 1 · edited May 23 '17 at 12:32

1

Try using css properties,

example:

body {
    scrollbar-face-color: #DBDEE7;
    scrollbar-highlight-color: #DBDEE7;
    scrollbar-shadow-color: #A4A6AB;
    scrollbar-3dlight-color: #DBDEE7;
    scrollbar-arrow-color: #354274;
    scrollbar-track-color: #EDEEF2;
    scrollbar-darkshadow-color: #DBDEE7;
}

How to change the scrollbar color using css

jsFiddle: http://jsfiddle.net/hmartiro/Xck2A/1/

edited May 23 '17 at 12:32

Community

1
1

answered May 17 '13 at 14:05

Gio

11
2

Hello, Thank you so much for reply. I tried this code but it did not work. Also i want to see this working in all browsers. – Ayyaz Zafar May 17 '13 at 14:19
I found an example, I'll post. – Gio May 17 '13 at 14:34

score 0 · Answer 2 · answered May 17 '13 at 14:33

Try playing with this example near of your goal :

http://jsfiddle.net/simurai/UsvLN/

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

How to make body scroll bar Stylish on the right side for all browsers?

2 Answers2