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;
        }
相关文章
|
6月前
|
前端开发
CSS 滚动条样式修改
CSS 滚动条样式修改
75 0
|
6月前
|
容器
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
66 0
|
14天前
|
前端开发 UED
在响应式布局中,如何避免 overflow 属性法导致的滚动条显示问题?
【10月更文挑战第27天】可以在响应式布局中有效地避免因`overflow`属性法导致的滚动条显示问题,提高页面的布局美观度和用户体验,使页面在不同的设备和屏幕尺寸下都能够呈现出良好的视觉效果和交互性能。
|
6月前
【UI】修改滚动条样式
【UI】修改滚动条样式
43 1
|
6月前
|
前端开发
CSS 隐藏滚动条
CSS 隐藏滚动条
48 0
|
11月前
|
前端开发
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
|
11月前
自定义scroll滑块样式
自定义scroll滑块样式
63 0
|
前端开发
CSS实现隐藏滚动条但是可以滚动
CSS实现隐藏滚动条但是可以滚动
60 0
|
前端开发
CSS 修改滚动条样式
CSS 修改滚动条样式
86 0
|
前端开发
修改滚动条样式 #30
修改滚动条样式 #30
87 0