前言
在我们浏览网页的时候，如果内容的高度或者宽度超过元素的高度或者宽度的时候，就会出现滚动条。滚动条的出现是浏览器的默认行为，这是不是说明我们就无法对滚动条的样式进行控制呢？答案是否定的，滚动条有多个可以自定义的css属性，我们完全可以按照自己的风格，来编写出更加漂亮的滚动条。
滚动条-scrollbar
在目前以webkit为主核心的浏览器时代，我们可以通过类似于伪元素::webkit-scrollbar等一系列伪元素属性来自定义我们需要的滚动条样式。
scrollbar的控制
对scrollbar的控制主要有以下几个css伪元素部分
scrollbar的控制
而每行伪元素代码对应的具体展现为
scrollbar各个部分的展现
scrollbar的不同状态
scrollbar具有不同的状态，也是通过伪元素实现的，主要为为以下部分
scrollbar的不同状态
scrollbar的不同部分以及不同状态可以随意搭配，完成不同的效果
具体实例
首先看一下css部分的代码，直接通过::webkit-scrollbar就可以对滚动条进设置，然后针对每个具体的位置都可以通过::webkit-scrollbar-来进行设置
css部分代码
运行出来的效果图如下
效果图
配合css3的background-image
当在background-image属性中使用css3的特性时，会做出更好看的滚动条效果
配合background-image
比如第一个间隔的颜色，实现代码如下
间隔颜色的代码
最后一个渐变的绿色，实现代码如下
渐变绿色的代码
总结
因为可以通过代码去控制滚动条的各个属性，所以我们可以按照需求来设计属于自己的滚动条，是不是很酷炫呢？
如果喜欢的话，记得关注小编噢，小编后续会坚持出更多技术性的文章，如果有任何问题，也欢迎提问，小编都会尽力解答的。