Customize the Chrome and Safari Scroll bar [tweaks]


#1

Hello everyone

I used a simple script to coustomize my blog’s live scroll bar. I got the script from a post at “My Blogger Labs”. You may see the original CSS on the link provided above. But the problem which I’m facing and about ehich I want some help from you guyz here is that the width of the scroll bar is large and I wanted to make it thinner. Following is the CSS coding which I have used (source MBL) :-

/* Webkit Scrollbar */
::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-track {
    background: #ffffff;
    -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
    border: 1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
    background: #febd17;
    -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);
}
::-webkit-scrollbar-thumb:hover {
    background: #febd18;
}
::-webkit-scrollbar-thumb:active {
    background: #febd17;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
} 

To see the current scroll bar live you can ask me for the URL of my blog, via private message.

Thank you in advance.


#2

Hi @NamanKumar (Naman), It is working fine. To make it thinner edit its width which you have set to 15 px.

Actually, I am sorry I didn’t get your question. Were you sharing the code or asking for solution? :confused:


#3

Naman, Use bellow code. I have added some effect on hover by which hover effect will appear. Your hover effect is not appearing because you used same color on hover and none hover.

/* Webkit Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #ffffff;
    -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
    border: 1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
    background: #febd17;
    -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);
}
::-webkit-scrollbar-thumb:hover {
    background: #EAA800;
}
::-webkit-scrollbar-thumb:active {
    background: #febd17;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
} 

Here, I have changed the size of scroll bar and also color on hover. You can try this one!


#4

Thank you @Shivansh , the code you have provided me is now working fine on my blog. Thank you for the help.


#5

Welcome Naman, Its my work to help everybody in the forum. :smile:


#7

Why Not @Shivam.

For asking this type of question, you can ask in PMs because here, your question is off topic


#8

i never understand about CSS and these type of things when ever i try to learn it makes me crazy both of you doing great job


#9

Hi @Tariq_aziz, Whatever I am writing in this post might not add any value to the existing topic but I just wanted to answer you.

I too don’t understand the major part but yeah I am going to learn CSS and scripts this summer. I am good at other programming languages but web development languages other than HTML are something new for me. And reading some codes shared in this forum and searching about them helps me in understanding their functioning.

I don’t know whether you come from an technical background or not but (Programming) languages are much more easier than English, Urdu, Hindi, French, etc that we study in institutes. Haha :stuck_out_tongue:

P.S. I am sorry to post something which was off-topic but I wanted to speak my heart out. Thanks.

~ Rohan Chaubey.


#10

i really like you brother basically i am not interested in CSS or HTML you know i have been blogging for two years but never think about css or HTML i just learn little bit from onlineutsaad abdul wali’s videos
and this forum is for everyone i think we are here to share our feeling and speak from heart


#11

All Forum Members,

I Request …Any Idea comes in your mind related to Blogger or new implementation related, Kindly Post as a New post every time which is really help everyone.

As @NamanKumar did in this post, if it is not related to blogger even-though it is not Junk I think. Thanks for sharing this topic. Appreciated