纯css美化滚动条样式 -webkit-scrollbar

滚动条对大家来说并不陌生，在日常前端开发中经常会遇到，如果我们用的是原汁原味的浏览器默认的样式，那将是对于我们美好的网页一个致命的打击，网页的颜值也会大打折扣的，所以这就导致我们在做 web 前端开发的时候，对滚动条的美化迫在眉睫，这也是今天为大家整理的内容。

那 webkit 浏览器是如何自定义滚动条的呢？

Webkit 支持拥有 overflow 属性的区域，列表框，下拉菜单，textarea 的滚动条自定义样式。当然，兼容所有浏览器的滚动条样式目前是不存在的。

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动(取决于是垂直还是水平)
::-webkit-scrollbar-track 滚动条的轨道(里面装有 thumb)
::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角，及两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

改变浏览器默认的滚动条样式：

::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
background-color:#f8f8f8;
}
::-webkit-scrollbar {//滚动条的宽度
width:9px;
height:9px;
}
::-webkit-scrollbar-thumb {//滚动条的设置
background-color:#dddddd;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}

当然有的小伙伴也想给特定的 div 模块修改滚动条的样式，也是 so easy，比如我们给 class 名为 test 的添加滚动条样式

.test::-webkit-scrollbar {
 width: 8px;
}
 .test::-webkit-scrollbar-track {
 background-color:red;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .test::-webkit-scrollbar-thumb {
 background-color:green;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}

当然现在网上也有很多前端技术大牛制作的有关滚动条优化插件，都是很不错的，如果你想省事大家可以搜罗一下，如果你想做自己的网页滚动条风格，那你还是自己学习一下吧。以上就是今天关于滚动条的优化代码内容，希望对你有帮助，时间仓促，如果大家有什么问题，下方欢迎留言指正。

以上关于纯css美化滚动条样式 -webkit-scrollbar的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。