网页滚动条样式设置CSS

大家好，欢迎来到IT知识分享网。

网页默认的滚动条不怎么好看，特别是对于网页内部元素使用滚动条时，默认样式就更加显得格格不入。

对于滚动条的样式设置，调整以下一个属性的值即可。

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar-button 滚动条两端的按钮

::-webkit-scrollbar-track 外层轨道

::-webkit-scrollbar-track-piece 内层滚动槽

::-webkit-scrollbar-thumb 滚动的滑块

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式

举个栗子：

<div class="content"> <div class="contentHeight"></div> </div>

设置样式：

.content { width: 300px; height: 300px; overflow: hidden; overflow-y: scroll; background-color: #00FFFF; border: 1px solid #000; } .contentHeight { width: 500px; height: 500px; }

以上样式规定，当内容大于父级框架尺寸时，纵向出现滚动条。

开始对滚动条进行设置：

.content::-webkit-scrollbar { /*滚动条整体样式*/ /*高宽分别对应横竖滚动条的尺寸*/ height: 50px; width: 5px; } .content::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #; } .content::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 5px; background: #fff; } .content::-webkit-scrollbar-button{ width: 6px; height: 6px; background-color: red; }

自定义滚动条样式