CSS自定义滚动条样式案例详解（css滚动条自动滚动）不看后悔

随心笔谈2年前发布编辑

144 0

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。

首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。

滚动条的css样式主要有三部分组成：

::-webkit-scrollbar ? 定义了滚动条整体的样式；
::-webkit-scrollbar-thumb ?滑块部分；
::-webkit-scrollbar-thumb ?轨道部分；

下面以overflow-y:auto;为例（overflow-x:auto同）

html代码：

css代码：

.test{
width: 50px;
height: 200px;
overflow: auto;
float: left;
margin: 5px;
border: none;
}
.scrollbar{
width: 30px;
height: 300px;
margin: 0 auto;

}
.test-1::-webkit-scrollbar {
width: 10px;
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.test-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}

效果如下如：

CSS自定义滚动条样式案例详解（css滚动条自动滚动）不看后悔

如果要改变滚动条的宽度：在::-webkit-scrollbar中改变即可；如果要改变滚动条滑块的圆角，在::-webkit-scrollbar-thumb 中改变；如果要改轨道的圆角在::-webkit-scrollbar-track中改变；

此外，滚动条的滑块不仅可以填充颜色还可以填充图片如下：

css代码：

.test-5::-webkit-scrollbar {
width: 10px;
height: 1px;
}
.test-5::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #F90;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.test-5::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

background: #EDEDED;
}

html代码：

效果如下：

CSS自定义滚动条样式案例详解（css滚动条自动滚动）不看后悔

以上就可以做出自己喜欢的滚动条了；

如果文档中会有多个滚动条出现，而且希望所有的滚动条样式是一样的，那么伪元素前面不需要加上class、id、标签名等之类的任何东西。

到此这篇关于CSS自定义滚动条样式案例详解的文章就介绍到这了,更多相关CSS自定义滚动条样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:jQuery中的CSS样式属性css()及width()系列大全带你了解CSS基础知识,样式详解Vue中CSS样式穿透问题BootStrap CSS全局样式和表格样式源码解析css分页样式代码Java?Spring的使用注解开发详解