纯CSS改变webkit内核浏览器的滚动条样式

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

基于webkit的浏览器现在可以自定义其滚动条的样式了,实现代码如下


复制代码
代码如下:

::-webkit-scrollbar/整体部分/
{
width: 10px;
height:10px;
}

::-webkit-scrollbar-track/滑动轨道/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
background: rgba(0,0,0,0.1);
}

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

::-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);
}

效果

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by