customising scroll bars in html/CSS

Question

I have created a page with custom scroll bars. When I applied the code, all the scroll bars in the body and those of the browser window reacted to the code. Yet what i wanted is to customize only scroll bars for the body not those of the window.

How can i change this? Many thanks. Here is the webkit code.

::-webkit-scrollbar .right {    
    width: 7px;        
}    

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

/* Handle */    
::-webkit-scrollbar-thumb .right{    
     -webkit-border-radius: 10px;       
     border-radius: 10px;      
     /*background: rgba(255,0,0,0.8); */    
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);     
}    

::-webkit-scrollbar-thumb:hover {    
     background-color:#028eff;    
}

Tim M. · Accepted Answer · 2013-04-25 12:00:54Z

1

Demo: http://jsfiddle.net/2cpSW/2/ (webkit only)

You can use a more restrictive selector:

/* just for testing */
div.custom-scroll {
    overflow: auto;
    height: 200px;
}

/* modified selectors from question */

.custom-scroll::-webkit-scrollbar {
    width: 7px;
}
.custom-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.custom-scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color:#028eff;
}

It looks like you were trying to do this with (::-webkit-scrollbar .right). Perhaps all you need to do is correct the selector? (.right::-webkit-scrollbar).

1 Comment

Richard Freeman Over a year ago

Thanks alot for answering. Actually that solves my problem. Now i understand where the problem came from.

Collectives™ on Stack Overflow

customising scroll bars in html/CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related