在chrome下可以自定义滚动条样式,举个例子::-webkit-scrollbar
{
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track-piece
background-color: rgba(204, 204, 204, 0.66);
-webkit-border-radius: 0px;
::-webkit-scrollbar-thumb
border-radius: 6px;
-webkit-border-radius: 6px;
background-color: #7b7b7b;
/*定义横向和纵向交点的样式*/
::-webkit-scrollbar-corner { background-color: transparent; }这里可以定义滚动条的粗细度和颜色等,至于更具体的诸如分别定义横竖滚动条样式等需要举首你自行修改。
另外也可以利用一些开源的滚动颤答粗条插件来实现你需要的效果,比茄镇如我之前使用过的nicescroll.js,在浏览器兼容方面会好一些,但是可能会对系统的稳定性有影响,这个需要你权衡。
目前只有chrome支持设置滚动条样式,给div设置伪类::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button 滚动羡腊条两端的按钮
::-webkit-scrollbar-track 外层轨道厅敏
::-webkit-scrollbar-track-piece 内层滚动槽扮派枝
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式如div::-webkit-scrollbar{
width:4px
.testDiv{
border-style:solid;
border-width:50px;
border-color:pink;
position:absolute;
top:200px;
left:300px;
height:200px;
width:300px;
overFlow-x:scroll;
overFlow-y:hidden;
scrollBar-face-color:green;
scrollBar-hightLight-color:red;
scrollBar-3dLight-color:orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;
以上就是土嘎嘎小编大虾米为大家整理的css自定义滚动条样式_css滚动条怎么设置相关主题介绍,如果您觉得小编更新的文章对您有所帮助,不要忘记讲本站分享给您身边的朋友哦!!