Login
网站首页 > 文章中心 > 其它

css自定义滚动条样式_css滚动条怎么设置

作者:小编 更新时间:2023-07-23 17:03:22 浏览量:404人看过

在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滚动条怎么设置相关主题介绍,如果您觉得小编更新的文章对您有所帮助,不要忘记讲本站分享给您身边的朋友哦!!

版权声明:倡导尊重与保护知识产权。未经许可,任何人不得复制、转载、或以其他方式使用本站《原创》内容,违者将追究其法律责任。本站文章内容,部分图片来源于网络,如有侵权,请联系我们修改或者删除处理。

编辑推荐

热门文章