chrome自定义滚动条样式

偶尔善良 提交于 2020-01-06 18:42:33

chrome内核浏览器可以修改滚动条样式,只需要几句css即可实现,下面列出常用的修改样式:

// 滚动条整体宽度::-webkit-scrollbar {
    width: 8px;
}// 滚动条滑槽样式
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 8px;
}// 滚动条样式
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #ddd;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover{
    background: #ccc;
}
::-webkit-scrollbar-thumb:active{
    background: #999;
}// 浏览器失焦的样式
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!