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

之前一直在CSDN發(fā)博客的，但是時(shí)間長(zhǎng)了，發(fā)的文章多了，也導(dǎo)致一個(gè)問題，就是當(dāng)我想去翻看之前的某一篇博客時(shí)，卻不那么好找到那篇博客了。即使我記得標(biāo)題和內(nèi)容，我仍然需要一直往下滾動(dòng)鼠標(biāo)，不停下拉翻找，這是一件很耗費(fèi)精力的事情。

就在這時(shí)，我想到了b站的一個(gè)功能：搜索自己的稿件。

也就是上圖。

所以，我就選擇在b站寫博客，以便以后我可以隨時(shí)查看自己的某個(gè)博客內(nèi)容。

由于博客不是專門發(fā)技術(shù)博客的網(wǎng)站，不是用的專門的md文檔形式，有一點(diǎn)點(diǎn)不習(xí)慣。除此之外，感覺在b站寫內(nèi)容，挺新鮮的。另外，b站的專欄可以寫代碼塊，也是對(duì)技術(shù)博客來說最重要的功能之一，有此功能，讓我很驚喜，也是選擇在b站寫東西的又一個(gè)重要原因。

對(duì)了，今天是我成為b站UP主的第561天。哈哈哈哈，只發(fā)過一個(gè)視頻23333.

---

開始正題。

---

介紹css改變滾動(dòng)條樣式的demo，直接上代碼：

打開瀏覽器，可以看到處理結(jié)果：

成功修改了滾動(dòng)條樣式。

---

但是，這里遇到了一個(gè)問題。就是當(dāng)內(nèi)容比較少時(shí)，滾動(dòng)條會(huì)變得很長(zhǎng)，不符合要求。所以，我們需要用別的方式，來處理滾動(dòng)事件，尤其是滾動(dòng)條內(nèi)的滑塊。

---

直接上demo。

---

---

效果圖：

---

效果已經(jīng)完成。 最后，為了更高效的完成項(xiàng)目要求，必須對(duì)滾動(dòng)條事件做一個(gè)封裝。