css 修改滚动条样式

浏览器滚动条样式设置

在前端开发的过程中，如果页面过高，html 页面就会出现一个宽宽的滚动条，我们就时常想要更改他的样式

话不多说 上例图

样图	说明	样图	说明
	正常情况下垂直滚动条		修改情况下垂直滚动条
	正常情况下水平滚动条		修改情况下垂直滚动条

使用属性

使用以下属性对浏览器滚动条做出修改

/* 设置浏览器垂直滚动条 */
html::-webkit-scrollbar{
       width: 10px; /* 浏览器垂直滚动条的宽度 */
       height: 10px; /* 浏览器水平滚动条的高度 */
}
/* 设置浏览器滚动条 上图示例蓝色位置的样式 */    
html::-webkit-scrollbar-thumb{
    background: rgb(55, 198, 255);   
    border-radius: 5px;
}
/* 设置浏览器滚动条滚动底层背景 */    
html::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .3);    
}