CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sham
Sham

Reputation: 424

Customizing scrollbar

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 

<body data-type="single" data-speed="32">

     <div class="scrollbar" id="ex3">
            <div class="content">Example 3</div>
     </div> 


  <div class="container">

    <div data-type="single" data-speed="8" id="divOne" class="div-one">
      <img src="img/up.png" alt="">
    </div> 


    <div data-type="single" data-speed="-16" id="divTwo" class="div-two"> 
      <img src="img/down.png" alt="">
    </div>

  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

  <script src="js/plugins.js"></script> 
  <script src="js/script.js"></script>


</body>

</html>

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;
}

Upvotes: 2

Views: 417

Answers (3)

rusmus
rusmus

Reputation: 1665

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.

Upvotes: 1

Ravimallya
Ravimallya

Reputation: 6610

try to use nicescroll which has some customization options. compatible with all major browsers.

Upvotes: 2

ZetCoby
ZetCoby

Reputation: 638

here is a small style :) add it anywhere in to your css file, u may edit is as you wish, hope it helps

::-webkit-scrollbar {
    width: 12px;
}

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

::-webkit-scrollbar-thumb {
    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Upvotes: 0

Related Questions