CSS优化滚动条样式设置优化
只有在 --webkit浏览器下有效果，如谷歌
主要有下面7个属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
————————————————
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: transparent;
}

::-webkit-scrollbar:hover {
background-color: #eee;
}

/* 滚动槽/外层轨道 */
::-webkit-scrollbar-track {
width: 5px;
height: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
min-height: 5px;
min-width: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

最新回复（0）