Question

我正在尝试学习视差效果。我从git hub获得了这个项目 https://github.com/james-marshall/parallax。但唯一令我烦恼的是滚动条。我正在尝试放置一些自定义滚动条。我正在关注此链接以实现这一目标 http://www.codeproject.com/Tips/674478/Customize-Scrollbars-using-CSS3,but它不能解决我的问题。我只能得到这样的东西。

enter image description here

如何更改恼人的滚动条（右上角），如果不是，至少我可以将其重置为默认（.ie windows）。我找不到任何滚动条设置（在css中，我是新手，我可能有误），我不知道java脚本。

怎么做???

这是html部分我试过的

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

这是我添加的css部分

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

Answer 1

尝试使用 nicescroll ，其中包含一些自定义选项。与所有主流浏览器兼容。

Answer 2

您下载的项目已使用Nicescroll。如果要禁用它，只需注释script.js的第129和130行：

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

如果您使用的是缩小版本，则显然需要重建并完成所有操作。

Answer 3

这是一个小风格:)将它添加到你的css文件中，你可以编辑你想要的，希望它有所帮助

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

自定义滚动条

3 个答案: