设置滚动条的样式

逆风优雅

已于 2022-06-09 15:29:36 修改

阅读量466

点赞数

分类专栏： CSS 文章标签：前端

于 2022-03-31 18:01:07 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44603011/article/details/123879575

版权

CSS 专栏收录该内容

48 篇文章

订阅专栏

这篇博客探讨了如何使用CSS为网页内容创建独特的滚动条样式，包括设置滚动条的宽度、颜色和圆角等属性。文章通过示例代码详细解释了`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`选择器的用法，帮助开发者提升网页的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 .table-content{
                                list-style: none;
                                padding: 0;
                                margin-top: 0;
                                height: 754px;
                                overflow-y:auto;
                                &::-webkit-scrollbar { //定义滚动条的整体样式
                                    width: 10px;
                                    height: 10px; // 滚动条的宽高
                                    background-color: #054663 //滚动条的颜色
                                }
                                &::-webkit-scrollbar-thumb { // 定义滚动条的样式
                                    border-radius: 10px;
                                    -webkit-box-shadow: inset 0 0 6px #00a8ff;
                                    background-color: #00C9FF;
                                }
                                &::-webkit-scrollbar-track { // 滚动条轨道的样式
                                    
                                    border-radius: 10px;
                                     // background: unset;
                                    background-color: red; 
                                 }
}