1.滚动条相关属性
::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border;
::-webkit-scrollbar-button 滚动条两边的按钮,默认不设置时不显示,可设置高度、背景色、背景图片;
::-webkit-scrollbar-track 整个滚动条去除两边按钮剩下的部分;
::-webkit-scrollbar-track-piece track去掉拖拽剩下的部分;
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分;
::-webkit-scrollbar-corner 边角;
::-webkit-resizer 定义右下角拖动块的样式
2.css代码实现隐藏滚动条效果
*::-webkit-scrollbar
{
width: 8px;
height: 8px;
background-color: #ffffff;
}
/*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-track
{
border-radius: 10px;
background-color: transparent;
}
/*定义滑块 内阴影+圆角*/
*::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: transparent;
}
3.css实现自定义灰色滚动条
*::-webkit-scrollbar
{
width: 8px;
height: 8px;
background-color: #ffffff;
}
/*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 9px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
*::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 9px rgba(0,0,0,.3);
background-color: #bfbfbf;
}