css滚动条美化

最新推荐文章于 2024-07-01 12:23:56 发布

原创最新推荐文章于 2024-07-01 12:23:56 发布 · 340 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css滚动条 #美化滚动条

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

css

2 篇文章

订阅专栏

.el-dialog__body{
    height: 300px;
    overflow-y: scroll;
}
/* 设置滚动滑块的宽高 */
.el-dialog__body::-webkit-scrollbar,
.el-dialog__body::-moz-scrollbar,
.el-dialog__body::-ms-scrollbar {
    width: 8px;
    height: 8px;
}
/* 设置滚动滑块的样式  （还可以加 :hover伪类 如div:hover::-webkit-scrollbar-thumb） */
.el-dialog__body::-webkit-scrollbar-thumb,
.el-dialog__body::-moz-scrollbar-thumb,
.el-dialog__body::-ms-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .05);
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/* 设置滚动条的样式 还可以设置边框属性 */
.el-dialog__body::-webkit-scrollbar-track,
.el-dialog__body::-moz-scrollbar-track,
.el-dialog__body::-ms-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: white;
}

ps:好像加上-moz-和-ms-前缀后样式就不生效了，只加-webkit-前缀是可以生效的

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 2.5px;
}
::-webkit-scrollbar-track {
    background-color: #ccc;
}

对所有的滚动条设置统一样式的话可以不需要指定元素类名，直接用伪类就行