打造属于自己的专属滚动条（生成滚动条）

前言

在我们浏览网页的时候，如果内容的高度或者宽度超过元素的高度或者宽度的时候，就会出现滚动条。滚动条的出现是浏览器的默认行为，这是不是说明我们就无法对滚动条的样式进行控制呢？答案是否定的，滚动条有多个可以自定义的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

比如第一个间隔的颜色，实现代码如下

间隔颜色的代码

最后一个渐变的绿色，实现代码如下

渐变绿色的代码

• 总结

因为可以通过代码去控制滚动条的各个属性，所以我们可以按照需求来设计属于自己的滚动条，是不是很酷炫呢？

如果喜欢的话，记得关注小编噢，小编后续会坚持出更多技术性的文章，如果有任何问题，也欢迎提问，小编都会尽力解答的。