174 字
1 分钟
浏览器滚动条样式设置
2020-08-10
/*谷歌、safari、qq浏览器、360浏览器滚动条样式*/
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 8px;
    height: 110px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #009688;
}

/*滑块效果*/
::-webkit-scrollbar-thumb:hover {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.4);
}

/*IE滚动条颜色*/
html {
    scrollbar-face-color: #009688; /*滚动条颜色*/
    scrollbar-highlight-color: #000;
    scrollbar-3dlight-color: #000;
    scrollbar-darkshadow-color: #000;
    scrollbar-Shadow-color: #adadad; /*滑块边色*/
    scrollbar-arrow-color: rgba(0, 0, 0, 0.4); /*箭头颜色*/
    scrollbar-track-color: #eeeeee; /*背景颜色*/
}
浏览器滚动条样式设置
https://fuwari.vercel.app/posts/浏览器滚动条样式设置/
作者
zengdw
发布于
2020-08-10
许可协议
CC BY-NC-SA 4.0