针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下:
滚动条组成部分
1. ::-webkit-scrollbar 滚动条整体部分
2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动) 3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) 4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。 5. ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分 6. ::-webkit-scrollbar-corner 边角,即垂直滚动条和水平滚动条相交的地方 7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件
滚动条样式/颜色组成部分
scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ scrollbar-face-color: #333; /*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /*立体滚动条背景颜色*/ scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/ Cursor:url(mouse.cur); /*自定义个性鼠标*/
如下为代码:
/*定义滚动条轨道*/ #style-2::-webkit-scrollbar-track { background-color: #F5F5F5; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22); } /*定义滚动条高宽及背景*/ #style-2::-webkit-scrollbar { width: 10px; background-color: rgba(0, 0, 0, 0.34); } /*定义滚动条*/ #style-2::-webkit-scrollbar-thumb { background-color: #8b8b8b; border-radius: 10px; }
*要实现单个div里面的内容滚动,需要满足三个条件:
1、div必须设定固定的高度,不能使用百分比或 auto 等弹性值。
2、其中的内容高度必须超过它本身的高度。
3、必须添加属性 “overflow:auto”。
附:
::-webkit-scrollbar{ width: 10px; height: 8px; background-color: #515a6e; -webkit-transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out; } ::-webkit-scrollbar:hover{ background-color: #d1d1d1; } ::-webkit-scrollbar-thumb{ background-color: rgb(23, 35, 61, 0.6); height: 50px; -webkit-border-radius:5px; border-radius:5px; border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out; } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active{ background-color:rgb(23, 35, 61, 0.8); border-right: 1px solid #f1f1f1; border-left: 1px solid #f1f1f1; } ::-webkit-scrollbar-track{ background-color:#fff; } ::-webkit-scrollbar-track:hover{ background-color:#fff; }
参考链接: