滚动条样式设置
滚动条样式
::-webkit-scrollbar
滚动条整体部分::-webkit-scrollbar-thumb
滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)::-webkit-scrollbar-track
滚动条的轨道(里面装有Thumb)::-webkit-scrollbar-button
滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece
内层轨道,滚动条中间部分(除去)::-webkit-scrollbar-corner
边角,即两个滚动条的交汇处::-webkit-resizer
两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
常用功能示例:
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:8px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:#ff0000;
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:#ffeeee;
}
其他测试:
/* 以下内容都是假的~~~~ */
/* 滚动条整体 */
.scroll-bar::-webkit-scrollbar{
/* 可以设置各种背景样式,可以引入图片 */
background: linear-gradient(rgb(0, 219, 117) ,white,rgb(164, 164, 255), white,pink);
/* 滚动条宽度 */
width: 10px;
}
/* 滚动条两端按钮 */
.scroll-bar::-webkit-scrollbar-button{
/* 可以设置各种背景样式,可以引入图片 */
/* background: linear-gradient(pink,#fff,pink); */
background: url('/static/images/line-bg.jpg');
}
/* 滚动条滑块 */
.scroll-bar::-webkit-scrollbar-thumb{
background: url('/static/images/line-bg.jpg');
}
A little hug, little gift.
All of little something.
these are our meories.