2

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;
}
Improve this question
2

3 Answers 3

Reset to default
2

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

Improve this answer
4
  • can u help me in getting to reset it to default windows view.
    – Sham
    Commented Feb 20, 2014 at 13:08
  • please elaborate this "help me in getting to reset it to default windows view."
    – Ravimallya
    Commented Feb 20, 2014 at 15:04
  • I mean to say that ,I wanted the default scroll bar view in the web Page.Anyway Problem got solved,it was because of the "nicescroll" when removed ,it came back to its default view.
    – Sham
    Commented Feb 21, 2014 at 7:50
  • oh. okay. glad to hear that your issue has been fixed. cheers.
    – Ravimallya
    Commented Feb 21, 2014 at 10:56
1

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.

Improve this answer
0
0

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);
}
Improve this answer
2
  • what it does is the customized scroll bar comes up ,but when the page stops loading (loading completed),again that old scroll bar comes up any guess on that on how to fix it ??
    – Sham
    Commented Feb 20, 2014 at 13:12
  • do you load any reset css? if you do make sure that you load it first
    – ZetCoby
    Commented Feb 20, 2014 at 13:32

Not the answer you're looking for? Browse other questions tagged or ask your own question.