前端浏览器滚动条炫酷美化

一、文章引导

二、博主简介

🌏博客首页： 春波petal
📑文章摘要：前端  浏览器滚动条美化
💌春波寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。

---

三、文章内容

废话不多说，直接copy代码使用

1、在public文件夹下 创建index.css 文件

/*index.css*/
/* 修改滚动条宽度 */
::-webkit-scrollbar {width: 10px;height: 10px;
}/* 修改滚动条颜色 */
::-webkit-scrollbar-thumb {background-color: #1890ff;background-image: -webkit-linear-gradient(45deg,hsla(0, 0%, 100%, 0.4) 25%,transparent 0,transparent 50%,hsla(0, 0%, 100%, 0.4) 0,hsla(0, 0%, 100%, 0.4) 75%,transparent 0,transparent);border-radius: 2em;
}::-webkit-scrollbar-corner {background-color: transparent;
}/* 修改滚动条轨道颜色 */
::-webkit-scrollbar-track {background-color: #f5f5f5;border-radius: 5px;
}

2、在index.html 中引入

<link rel="stylesheet" href="/index.css">

---

四、程序语录

本篇博客文章模板唯一版权归属©春波petal