Javascript 自定义滚动条_Javascript_Jquery_Html_Css

Javascript 自定义滚动条

javascript jquery html css

Javascript 自定义滚动条,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在努力学习视差效果。我从GitHub得到了这个项目 . 但唯一让我恼火的是滚动条。我正在尝试放置一些定制的滚动条。我遵循这个链接来实现这一点它不能解决我的问题。我只得到这样的东西我怎样才能改变那个讨厌的滚动条（右上角），如果不是的话，至少我可以将它重置为默认值（.I.e.windows）。我找不到任何滚动条设置（在css中，我是一个新手，我可能弄错了），而且我不知道java脚本怎么做这是我尝试过的html部分 <body data-type="single" data-sp

我正在努力学习视差效果。我从GitHub得到了这个项目 . 但唯一让我恼火的是滚动条。我正在尝试放置一些定制的滚动条。我遵循这个链接来实现这一点它不能解决我的问题。我只得到这样的东西

我怎样才能改变那个讨厌的滚动条（右上角），如果不是的话，至少我可以将它重置为默认值（.I.e.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文件的任意位置，您可以随意编辑，希望对您有所帮助

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

尝试使用具有一些自定义选项的。与所有主要浏览器兼容。

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

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

如果您使用的是缩小版，显然需要重新构建和所有这些。

不要让滚动条CSS对一个元素如此精确@Paulie_知道如何重置为默认的windows滚动条外观吗？你能帮助我将其重置为默认的windows视图吗？请详细说明“帮助我将其重置为默认的windows视图”。我的意思是，我希望在网页中使用默认的滚动条视图。无论如何，问题得到解决，这是因为“NiceSoll”删除后，它会返回到默认视图。噢。可以很高兴听到你的问题已经解决了。干杯。它所做的是自定义滚动条出现，但当页面停止加载（加载完成）时，旧滚动条再次出现了关于如何修复它的猜测？？您是否加载了任何重置css？如果您确实这样做了，请确保先加载它

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