网页默认的滚动条不怎么好看,特别是对于网页内部元素使用滚动条时,默认样式就更加显得格格不入。
对于滚动条的样式设置,调整以下一个属性的值即可。
::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
举个栗子:
以上样式规定,当内容大于父级框架尺寸时,纵向出现滚动条。
开始对滚动条进行设置:
.content::-webkit-scrollbar{/*滚动条整体样式*//*高宽分别对应横竖滚动条的尺寸*/height:50px;width:5px; }.content::-webkit-scrollbar-thumb{/*滚动条里面小方块*/border-radius:5px;-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);background:535353; }.content::-webkit-scrollbar-track{/*滚动条里面轨道*/-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);border-radius:5px;background:fff; }.content::-webkit-scrollbar-button{width:6px;height:6px;background-color: red; }自定义滚动条样式