【知识整理】利用CSS自定义滚动条样式

一。某些情况下浏览器自带的滚动条样式不能满足我们的需求，这时需要我们自定义滚动条的样式，经过网上资料的收集，发现了自定义浏览器样式的代码，但仅限webkit内核的浏览器，其他浏览器暂不兼容。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  

#scroll::-webkit-scrollbar  
{  
    width: 5px;  /*滚动条宽度*/
    height: 5px;  /*滚动条高度*/
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
#scroll::-webkit-scrollbar-track  
{  
    border-radius: 2.5px;  /*滚动条的背景区域的圆角*/
    background-color: #e6e6e6;/*滚动条的背景颜色*/  
}  
  
/*定义滑块 内阴影+圆角*/  
#scroll::-webkit-scrollbar-thumb  
{  
    border-radius: 2.5px;  /*滚动条的圆角*/
    background-color: #57c2ff;  /*滚动条的背景颜色*/
}

经过上述代码的设置，我将滚动条样式改为下图，大家可以根据自己的需求自行设定。