滚动条主要属性
::-webkit-scrollbar
:滚动条整体部分::-webkit-scrollbar-thumb
:滚动条里面的滑块::-webkit-scrollbar-track
: 滚动条的轨道::-webkit-scrollbar-button
: 滚动条轨道两端的按钮,允许通过点击微调滑块的位置::-webkit-scrollbar-track-piece
:内层轨道,滚动条中间部分::-webkit-scrollbar-corner
:边角,及两个滚动条的交汇处::-webkit-resizer
:两个滚动条的交汇处上用于通过拖动调整元素大小的小控示例
<style>/* 设置滚动条的样式 */::-webkit-scrollbar {width:12px; /* 竖向滚动条宽度 */height: 13px; /* 横向滚动条宽度 */background-color: #000;}/* 滚动槽 */::-webkit-scrollbar-track {/* 其实直接在 ::-webkit-scrollbar 中设置也能达到同样的视觉效果*//* -webkit-box-shadow: inset 0 0 6px rgba(177, 223, 117, 0.7); */background-color: #fff;border-radius: 10px;}::-webkit-scrollbar-button {/* 设置了相关样式,按钮才会出来 */background-color: #6868f3;}/* 滚动条滑块 */::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(8, 182, 110, 0.616);}::-webkit-scrollbar-thumb:hover {background: rgba(5, 156, 93, 0.719);-webkit-box-shadow: unset;}::-webkit-scrollbar-thumb:window-inactive {/* 容器不被激活时的样式 */background: #ff000066;}::-webkit-scrollbar-corner {/* 两个滚动条交汇处边角的样式 */background-color: #f34e12;}</style>
效果
如果觉得《CSS 滚动条样式美化》对你有帮助,请点赞、收藏,并留下你的观点哦!