vue中修改滚动条样式

总会遇到需要修改页面滚动条的需求

如果需要全局修改 就在大文件中添加

::-webkit-scrollbar {
    /* 滚动条整体样式 */
    width: 6px;
    /* 宽高分别对应横竖滚动条的尺寸 */
    background: rgb(235, 238, 245);
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb {
    /* 滚动条里的小方块 */
    border-radius: 3px;
    background: #2e4a89;
    height: 120px;
}
::-webkit-scrollbar-track {
    /* 滚动条里面的轨道 */
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
}

需要某个特定的滚动条修改 就在：：前加入需要修改的类名

如果前面的修改没有生效 安装了less的话 则加上/deep/

/deep/.ant-table-body::-webkit-scrollbar {
    /* 滚动条整体样式 */
    width: 6px;
    /* 宽高分别对应横竖滚动条的尺寸 */
    background: rgb(235, 238, 245);
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.2);
}
/deep/.ant-table-body::-webkit-scrollbar-thumb {
    /* 滚动条里的小方块 */
    border-radius: 3px;
    background: #2e4a89;
    height: 120px;
}
/deep/.ant-table-body::-webkit-scrollbar-track {
    /* 滚动条里面的轨道 */
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
}

 

可以在类名前面添加/deep/