Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Customizing scrollbar

Customizing scrollbar

Problem

I am trying to learn parallax effect .I got this project from git hub https://github.com/james-marshall/parallax. But the only thing which irks me is the Scroll Bar .I am trying to put some customized scroll bar. I am following this link to achieve that http://www.codeproject.com/Tips/674478/Customize-Scrollbars-using-CSS3,but it does not fix my issue .I only get something like this.

enter image description here

How can I change that annoying scroll bar (top right),if not at least I can reset it to default (.i.e windows).I can not find any scroll bar settings (in css,I am a newcomer,I may have mistaken),and I dont know about java script.

How to do it ???

Here is the html part what i have tried



     
Example 3

and this is the css part what i have added

.scrollbar{
width:150px;
height:300px;
background-color:lightgray;
margin-top:40px;
margin-left:40px;
overflow-y:scroll;
float:left;
}
.content{
height:450px;
} 
#ex3::-webkit-scrollbar{
width:16px;
background-color:#cccccc;
} 
#ex3::-webkit-scrollbar-thumb{
background-color:#B03C3F;
border-radius:10px;
}
#ex3::-webkit-scrollbar-thumb:hover{
background-color:#BF4649;
border:1px solid #333333;
}
#ex3::-webkit-scrollbar-thumb:active{
background-color:#A6393D;
border:1px solid #333333;
} 
#ex3::-webkit-scrollbar-track{
border:1px gray solid;
border-radius:10px;
-webkit-box-shadow:0 0 6px gray inset;
} 
Problem courtesy of: Sham

Solution

The project you downloaded already uses Nicescroll. If you want to disable it, just comment line 129 and 130 of script.js:

//var nice = $('html').niceScroll(); // The document page (body)
//$('#div1').html($('#div1').html() + ' ' + nice.version);

If you are using the minified version, you obviously need to rebuild and all that.

Solution courtesy of: rusmus

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Customizing scrollbar

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×