CSS滚动条样式设置方法，修改网页默认滚动条

CSS滚动条样式设置方法，修改网页默认滚动条在浏览网页的时候，我们可以看到网页右边会有一个滚动条，这个默认的滚动条是灰色的长条，不少站长为追求个性，通常会修改这个滚动条样式。下面橘子君为大家分享的便是CSS滚动条设置方法，因为是通过CSS来修改样式，所以此方法可以通用到其他网站。

首先了解一下滚动条常用属性
::-webkit-scrollbar ：滚动条整体部分，可自定义滚动条的大小等。
::-webkit-scrollbar-track ：外层轨道，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece ：内层轨道，可增加滚动框背景样式。
::-webkit-scrollbar-thumb ：滚动条里面可以鼠标点击拖动的那部分。
下面我们来看下CSS滚动条设置的方法，方法很简单，站长只需在网站的CSS文件中添加以下代码，通常是style.css文件。
/*---滚动条默认显示样式--*/::-webkit-scrollbar-thumb{background-color:#018EE8;height:50px;outline-offset:-2px;outline:2px solid #fff;-webkit-border-radius:4px;border: 2px solid #fff;}/*---鼠标点击滚动条显示样式--*/::-webkit-scrollbar-thumb:hover{background-color:#FB4446;height:50px;-webkit-border-radius:4px;}/*---滚动条大小--*/::-webkit-scrollbar{width:8px;height:8px;}/*---滚动框背景样式--*/::-webkit-scrollbar-track-piece{background-color:#fff;-webkit-border-radius:0;}【CSS滚动条样式设置方法，修改网页默认滚动条】在以上CSS滚动条设置样式前，站长可以先做好备份。添加上面的代码后我们会发现滚动条变细，鼠标放上去拖动是红色，平时滚动条的颜色是蓝色的，站长可将颜色#018EE8替换，建议用配色图挑选合适的颜色，喜欢的朋友可以动手试试。

CSS滚动条样式设置方法，修改网页默认滚动条

推荐阅读

怎样炖制牛肉

多功能眼镜有哪些功能

切片工具该怎么用

gta5死亡尾流差事怎么开

年会穿什么颜色最适合

小马过河告诉我们什么道理小马过河有什么道理

原神风神瞳共鸣石怎么用

紫玫瑰紫玫瑰的花语与意义

抽奖抽到炫彩皮肤给原皮肤吗

薏米山药粥做法图解