CSS滚动条样式

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; /*滚动条的背景区域的圆角*/ background-color: transparent; /*滚动条的背景颜色*/ } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; /*滚动条的圆角*/ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #ddd; /*滚动条的背景颜色*/ }

/* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 8px; height:8px; } /* 滚动槽 */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 2px; } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(153,153,153,0.4); -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.8); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(0,0,0,0.3); } /* 隐藏滚动条 */ ::-webkit-scrollbar{ display:none; }