CSS3自定义滚动条样式_css3设置元素滚动条位置-程序员宅基地

技术标签：前端

有的公司或许会要求做个好看的滚动条，这时候，我们就需要来自定义滚动条，但是IE跟别的是不一样的。所以，在下面的文章中，会有两种不同的方式来自定义滚动条样式。

webkit浏览器css设置滚动条：（下面是他的7个主要的属性）

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar-button 滚动条两端的按钮（滚动条轨道两端的按钮，允许通过点击微调小方块的位置）

::-webkit-scrollbar-track  外层轨道（滚动条的轨道，里面装有thumb）

::-webkit-scrollbar-track-piece  内层滚动槽

::-webkit-scrollbar-thumb 滚动的滑块

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式

以下是webkit浏览器css设置滚动条的其他属性：

:horizontal 水平方向的滚动条

:vertical 垂直方向的滚动条

:decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)

:increment decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)

:start 伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

:end 类似于start伪类，标识对象是否放到滑块的后面。

:double-button  该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。

:single-button 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。

:no-button 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。

:corner-present  用于所有滚动条轨道，指示滚动条圆角是否显示。

:window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

IE下面的CSS设置滚动条（IE比较简单，自定义的项目比较少，全是颜色。）

scrollbar-arrow-color: color; /三角箭头的颜色/

scrollbar-face-color: color; /立体滚动条的颜色（包括箭头部分的背景色）/

scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/

scrollbar-highlight-color: color; /滚动条的高亮颜色（左阴影？）/

scrollbar-shadow-color: color; /立体滚动条阴影的颜色/

scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/

scrollbar-track-color: color; /立体滚动条背景颜色/

scrollbar-base-color:color; /滚动条的基色/

下面是以webkit为例子写的：

.index .financial::-webkit-scrollbar{
    width: 0.2rem;
    background-color: #f5f5f5;
}
/*定义滚动条的轨道，内阴影及圆角*/
.index .financial::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 0.2rem;
    background-color: #f5f5f5;
}
/*定义滑块，内阴影及圆角*/
.index .financial::-webkit-scrollbar-thumb{
    border-radius: 0.2rem;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: red;
}

最后如下图：

当然这个只是测试的，剩下的，就根据UI的来改对应的属性就可以了。

本文链接：https://blog.csdn.net/wz1135640/article/details/79025388

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

字节流和字符流详解-程序员宅基地

文章浏览阅读2.6w次，点赞73次，收藏313次。1.流的概念在编程中是一种抽象的概念，就好比“水流”，从一段流向另一端在程序中所有的数据都是以流的方式进行传输或保存的，程序需要数据的时候要使用输入流读取数据，而当程序需要将一些数据保存起来的时候，就要使用输出流完成。程序中的输入输出都是以流的形式保存的，流中保存的实际上全都是字节文件。2.流的分类按照流向可以分为：输入流（如：键盘，麦克风），输出流（如：显示器，音箱）按照传输单位可以分为：字节流和字符流3.什么是字节流，什么是字符流字节流：它处理单元为1个字节（byte），操作字节和_字节流和字符流

问题 A: 算法7-12：有向无环图的拓扑排序_读入一个无向图的邻接矩阵（即数组表示），建立无向图-程序员宅基地

文章浏览阅读2.2k次，点赞3次，收藏9次。问题 A: 算法7-12：有向无环图的拓扑排序时间限制: 1 Sec 内存限制: 32 MB 献花..._读入一个无向图的邻接矩阵（即数组表示），建立无向图

各平台Linux以及windows安装redis6.0.6_redis 6.0 window版本升级-程序员宅基地

文章浏览阅读5.6k次。官网：https://redis.io/中文网：http://www.redis.cn/项目地址：https://github.com/redis/redisLinux关于Linux下手动编译一定要注意gcc版本gcc --version，如果太低可能导致编译失败，升级gcc版本就可以了centos安装前的准备工作# 安装gcc套件yum install cpp binutils glibc glibc-kernheaders glibc-common glibc-devel gcc _redis 6.0 window版本升级

sysctl优化linux网络_net.ipv4.conf.eth0.accept_redirects-程序员宅基地

文章浏览阅读466次。1, 优化网络设备接收队列 net.core.netdev_max_backlog=3000 该文件表示在每个网络接口接收数据包的速率比内核处理这些包的速率快时，允许送到队列的数据包的最大数目。默认值：Red Hat Linux release 9 (Shrike)默认为300 rhel5 默认为1000 建议值为30002，_net.ipv4.conf.eth0.accept_redirects

基于灰狼优化深度置信网络(GWO-DBN)的数据分类预测，优化参数为隐藏层节点数目，迭代次数，学习率。多特征输入单输出的二分类及多分类模型。程序内注释详细，直接替换数据就可以用。程序语言为ma_灰狼优化bp数据分类-程序员宅基地

文章浏览阅读76次。基于灰狼优化深度置信网络(GWO-DBN)的数据分类预测，优化参数为隐藏层节点数目，迭代次数，学习率。多特征输入单输出的二分类及多分类模型。程序内注释详细，直接替换数据就可以用。程序语言为matlab，程序可出分类效果图，迭代优化图，混淆矩阵图。_灰狼优化bp数据分类

CPP编译流程知识点_cpp文件如何编译-程序员宅基地

文章浏览阅读1k次，点赞18次，收藏18次。介绍cpp编译流程_cpp文件如何编译