css3改变滚动条样式以及样式的封装

大家好，我是`梅巴哥er`。

之前一直在CSDN发博客的，但是时间长了，发的文章多了，也导致一个问题，就是当我想去翻看之前的某一篇博客时，却不那么好找到那篇博客了。即使我记得标题和内容，我仍然需要一直往下滚动鼠标，不停下拉翻找，这是一件很耗费精力的事情。

就在这时，我想到了b站的一个功能：搜索自己的稿件。

也就是上图。

所以，我就选择在b站写博客，以便以后我可以随时查看自己的某个博客内容。

由于博客不是专门发技术博客的网站，不是用的专门的md文档形式，有一点点不习惯。除此之外，感觉在b站写内容，挺新鲜的。另外，b站的专栏可以写代码块，也是对技术博客来说最重要的功能之一，有此功能，让我很惊喜，也是选择在b站写东西的又一个重要原因。

对了，今天是我成为b站UP主的第561天。哈哈哈哈，只发过一个视频23333.

---

开始正题。

---

介绍css改变滚动条样式的demo，直接上代码：

打开浏览器，可以看到处理结果：

成功修改了滚动条样式。

---

但是，这里遇到了一个问题。就是当内容比较少时，滚动条会变得很长，不符合要求。所以，我们需要用别的方式，来处理滚动事件，尤其是滚动条内的滑块。

---

直接上demo。

---

---

效果图：

---

效果已经完成。 最后，为了更高效的完成项目要求，必须对滚动条事件做一个封装。