前端滚动条样式重写

xiaokuangren_

已于 2024-05-31 14:43:31 修改

阅读量237

点赞数

文章标签：前端 javascript css3

于 2023-09-08 16:33:51 首次发布

本文链接：https://blog.youkuaiyun.com/xiaokuangren_/article/details/132763211

版权

修改浏览器滚动条样式

// 滚动条
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: #efefef;
    // display: none // 隐藏滚动条
}
::-webkit-scrollbar-thumb {
    background-color: #bdb7b7;
    border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #efefef;
    border-radius: 32px;
}

修改element table滚动条样式.

/* 整体样式 */
 /deep/.el-table__body-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
 }
/* 滚动条 */
 /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #b3d8ff;
    border-radius: 6px;
}
/* 滚动条鼠标经过样式 */
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #66b1ff;
    border-radius: 8px;
}
/* 滚动条轨道 */
/deep/.el-table__body-wrapper::-webkit-scrollbar-track-piece {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    background: #ededed
}