您的位置：首页 > 数码常识数码常识
css自定义滚动条样式（自定义滚动条样式滑块大小）
2025-05-15人已围观
css自定义滚动条样式（自定义滚动条样式滑块大小）
前言在我们实际开发过程中可能会遇到页面出现滚动条的情况，但是在常规情况下滚动条的默认样式咱们试不敢恭维的，所以咱们就需要对滚动条的一些样式进行调整，换成自己想要的样式，那具体怎么做那，咱们一起来看看；
自定义滚动条样式滑块大小前言
样式表
.div::-webkit-scrollbar {
width: 5px;
}
. div::-webkit-scrollbar-track {
background: rgb(179, 177, 177);
border-radius: 10px;
}
. div::-webkit-scrollbar-thumb {
background: rgb(136, 136, 136);
border-radius: 10px;
}
. div::-webkit-scrollbar-thumb:hover {
background: rgb(100, 100, 100);
border-radius: 10px;
}
. div::-webkit-scrollbar-thumb:active {
background: rgb(68, 68, 68);
border-radius: 10px;
}
说明
::-webkit-scrollbar
此属性是设置整个滚动条的样式
::-webkit-scrollbar-track
此属性是设置滚动条的滚动区域的样式即滚动条的轨道
::-webkit-scrollbar-thumb
此属性是设置滚动条可拖拽部分的样式即滚动条的滑块
最终效果
大家也可以根据自己的喜好设置滚动条的颜色或者给滚动条增加图片；
上面就是小居数码小编今天给大家介绍的关于（自定义滚动条样式滑块大小）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
cad尺寸标注样式设置详细图文教程（CAD设置尺寸标注）
word样式与格式设置步骤（word文档如何设置样式）
怎么在word文档里加自定义水印（word为文档添加水印）
键盘怎么自定义改键软件（手机键盘怎么自定义改键）
155783
前言在我们实际开发过程中可能会遇到页面出现滚动条的情况，但是在常规情况下滚动条的默认样式咱们试不敢恭维的，所以咱们就需要对滚动条的一些样式进行调整，换成自己想要的样式，那具体怎么做那，咱们一起来看看；
自定义滚动条样式滑块大小前言
样式表
.div::-webkit-scrollbar {
width: 5px;
}
. div::-webkit-scrollbar-track {
background: rgb(179, 177, 177);
border-radius: 10px;
}
. div::-webkit-scrollbar-thumb {
background: rgb(136, 136, 136);
border-radius: 10px;
}
. div::-webkit-scrollbar-thumb:hover {
background: rgb(100, 100, 100);
border-radius: 10px;
}
. div::-webkit-scrollbar-thumb:active {
background: rgb(68, 68, 68);
border-radius: 10px;
}
说明
::-webkit-scrollbar
此属性是设置整个滚动条的样式
::-webkit-scrollbar-track
此属性是设置滚动条的滚动区域的样式即滚动条的轨道
::-webkit-scrollbar-thumb
此属性是设置滚动条可拖拽部分的样式即滚动条的滑块
最终效果
大家也可以根据自己的喜好设置滚动条的颜色或者给滚动条增加图片；
上面就是小居数码小编今天给大家介绍的关于（自定义滚动条样式滑块大小）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
cad尺寸标注样式设置详细图文教程（CAD设置尺寸标注）
word样式与格式设置步骤（word文档如何设置样式）
怎么在word文档里加自定义水印（word为文档添加水印）
键盘怎么自定义改键软件（手机键盘怎么自定义改键）
155783
很赞哦！ ()