css修改整个项目的滚动条样式

佚名 6年前 (2019-04-18) 随笔 473人围观抢沙发百度已收录

在项目中，滚动条不可避免的药出现。设置统一规范的滚动条也是必然。用一个独立的css文件即可修改整个项目中的滚动条样式。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

scrollBar.css:

/* 滚动条有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
    background-color: #00000000;
    border-radius: 1px;
}

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 100%;
}

/* 滚动条竖向滑块 */
::-webkit-scrollbar-thumb:vertical {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 1px;
}

/* 滚动条竖向滑块hover */
::-webkit-scrollbar-thumb:vertical:hover {
    background-color: rgba(255, 255, 255, .2);
}

/* 滚动条横向滑块 */
::-webkit-scrollbar-thumb:horizontal {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 1px;
}

/* 滚动条横向滑块hover */
::-webkit-scrollbar-thumb:horizontal:hover {
    background-color: rgba(255, 255, 255, .2);
}

/* 同时有垂直和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
    display: block;    /* 修复交汇时出现的白块 */
}