gpt4 book ai didi

javascript - 自定义滚动条

转载 作者:太空宇宙 更新时间:2023-11-04 16:30:50 26 4
gpt4 key购买 nike

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

enter image description here

我怎样才能改变那个烦人的滚动条(右上角),如果不能,至少我可以将它重置为默认值(.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部分

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

最佳答案

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

关于javascript - 自定义滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21908343/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com