overflow滚动条样式修改

简介: overflow滚动条样式修改

当div用overflow: scroll;时可以用伪元素::-webkit-scrollbar来设置滚动条样式

/*滚动条*/
        ::-webkit-scrollbar {
            width: 10px; /* 设置滚动条宽度 */
        }
        /*滚动手柄*/
        ::-webkit-scrollbar-thumb {
            height: 30px;
            background-color: #338BD6; /* 滚动条手柄颜色 */
            border-radius: 5px; /* 滚动条手柄边框圆角 */
            /*outline: 2px solid #dcbc6b;*/
            /*outline-offset: -2px;*/
            /*border: 2px solid #b98d8d;*/
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: #338BD6; /* 滚动条手柄hover颜色 */
        }
        /*滚动轨道*/
        ::-webkit-scrollbar-track-piece {
            background-color: #1D3887; /* 滚动条轨道颜色 */
            -webkit-border-radius: 3px;
        }
目录
打赏
0
1
1
0
31
分享
相关文章
|
10月前
|
CSS 滚动条样式修改
CSS 滚动条样式修改
106 0
|
10月前
|
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
91 0
在响应式布局中,如何避免 overflow 属性法导致的滚动条显示问题?
【10月更文挑战第27天】可以在响应式布局中有效地避免因`overflow`属性法导致的滚动条显示问题,提高页面的布局美观度和用户体验,使页面在不同的设备和屏幕尺寸下都能够呈现出良好的视觉效果和交互性能。
|
10月前
【UI】修改滚动条样式
【UI】修改滚动条样式
67 1
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
修改滚动条样式 #30
修改滚动条样式 #30
109 0
css:overflow-y: scroll内容未超出也显示滚动条
css:overflow-y: scroll内容未超出也显示滚动条
620 0
CSS样式更改——字体设置Font&边框Border
CSS样式更改——字体设置Font&边框Border
422 0