【CSS】浏览器滚动条修改效果

浏览器滚动条样式修改

所有 Chromium 浏览器和 webkit、Mozilla核心浏览器都支持通过 CSS 对浏览器滚动条样式的修改。本文以适用性最强的 Chromium 和 webkit 为例，记录最近网站升级中做的调整。本次用到的相关值：

/*—滚动条默认状态显示样式–*/  
::-webkit-scrollbar-thumb{   

}   
  
/*—鼠标悬浮于滚动条上时显示样式–*/  
::-webkit-scrollbar-thumb:hover{   

}   
  
/*—滚动条本身–*/  
::-webkit-scrollbar{   

}   
  
/*—滚动框背景样式–*/  
::-webkit-scrollbar-track-piece{   

}

注释已经表明，其中 scrollbar-tumb 是指滚动条活动的那部分，而 scrollbar 是滚动条轨道部分。

首先来修改滚动条默认状态样式：

::-webkit-scrollbar-thumb{   
    background-color: #a1a5ac;   
    height: 50px;   
    outline-offset: -2px;   
    outline: 0px solid #fff;   
    -webkit-border-radius: 0px;   
    border: 2px solid rgba(255,255,255,0);   
}

这里，background-color 表示滚动条默认状态颜色，height 值表示滚动条的最短长度。border-radius 表示滚动条的上下圆角，border 值是边框。色值既可以用 16 进制表示，也可以用 rgba 形式表示。

随后是滚动条触发状态样式：

::-webkit-scrollbar-thumb:hover{   
    background-color:#FF006B;   
    background-image: -webkit-linear-gradient(90deg, #77F1FD 0%, #FFB7ED 100%);  
    height:50px;   
    -webkit-border-radius:0px; 
}

其中添加了 background-image 标签，并用渐变标签对滚动条做渐变处理。90deg 表示渐变角度，颜色后面的百分数表示其所在的相对位置。

最后对滚动条轨道进行定义：

/*—滚动条大小–*/  
::-webkit-scrollbar{   
    width:6px;   
    height:10px;   
}   
  
/*—滚动框背景样式–*/  
::-webkit-scrollbar-track-piece{   
    background-color:rgb(255,255,255,0);   
    -webkit-border-radius:0;   
}

width 值定义滚动条宽度，background-color 定义滚动条轨道颜色，其下面的 border-radius 定义滚动条轨道圆角。

整体代码如下：

/*—滚动条默认显示样式–*/  
::-webkit-scrollbar-thumb{   
    background-color:#a1a5ac;   
    height:50px;   
    outline-offset:-2px;   
    outline:0px solid #fff;   
    -webkit-border-radius:0px;   
    border: 2px solid rgba(255,255,255,0);   
}   
  
/*—鼠标点击滚动条显示样式–*/  
::-webkit-scrollbar-thumb:hover{   
    background-color:#FF006B;   
    background-image: -webkit-linear-gradient(90deg, #77F1FD 0%, #FFB7ED 100%);  
}   
  
/*—滚动条大小–*/  
::-webkit-scrollbar{   
    width:6px;   
    height:10px;   
}   
  
/*—滚动框背景样式–*/  
::-webkit-scrollbar-track-piece{   
    background-color:rgb(255,255,255,0);   
    -webkit-border-radius:0;   
}