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

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

智能推荐

GWO优化LSBooST回归预测（matlab代码）-程序员宅基地

文章浏览阅读289次，点赞9次，收藏6次。这种算法的设计灵感来源于灰狼群体的捕食行为，其核心思想在于模仿灰狼社会的结构和行为模式。结果可视化：通过绘制GWO寻优过程收敛曲线、训练集、验证集和测试集的真实标签与预测标签的曲线对比图，直观地展示了模型的预测效果，便于用户理解算法和模型的性能。数据处理流程清晰：对数据进行了标准化处理，包括Zscore标准化，将数据分为训练集、验证集和测试集，有助于保证模型训练的准确性和可靠性。模块化结构：代码按照功能模块进行划分，清晰地分为数据准备、参数设置、算法处理块和结果展示等部分，提高了代码的可读性和可维护性。

【C语言/C++学习】函数（一）_c语言函数和c++函数学习方法-程序员宅基地

文章浏览阅读542次。文章目录1、引言1、引言_c语言函数和c++函数学习方法

2020 cr节目源_直播源2020-10-10-程序员宅基地

文章浏览阅读4.6k次。#EXTM3U#EXTINF:-1 ,翡翠台https://pullhls3948069e.live.126.net/live/7b23e9c43a5ae5ac5fbc5798ba287286/playlist.m3u8#EXTINF:-1 ,翡翠台http://116.199.5.52/00000000/index.m3u8?&Fsv_ctype=LIVES&Fsv_otype=...

Linux ntp时间服务器的搭建和配置-程序员宅基地

文章浏览阅读1w次，点赞7次，收藏48次。Linux ntp时间服务器的搭建和配置date +"%Z %z"查看ntp服务器与上层ntp的状态【命令】ntpq -premote：本机和上层ntp的ip或主机名，“+”表示优先，“*”表示次优先refid：参考上一层ntp主机地址st：stratum阶层when：多少秒前曾经同步过时间poll：下次更新在多少秒后reach：已经向上层ntp服务器要求更新的次数delay：网络延迟offset：时间补偿jit...

Android定位功能实现_android location-程序员宅基地

文章浏览阅读4.4k次，点赞2次，收藏20次。android的定位功能有两种方式：1. 使用第三方地图sdk提供的定位功能。2. 使用sdk的Location实现，借助GPS（高精度）和网络（低精度）实现定位。_android location

Android系统升级那些事儿_edify 源码-程序员宅基地

文章浏览阅读9.7k次，点赞3次，收藏13次。本文描述了Android系统更新要用到的一些概念，用到的硬件、用于烧写的系统和用于系统更新的文件。_edify 源码

随便推点

TensorFlow 可视化显示运行过程_pycharm tensorflow 运行状态-程序员宅基地

文章浏览阅读462次。最近两天在跟着莫烦大神修炼TensorFlow，今天学到的是TensorFlow 可视化，是Tensorboard下显示的。现附上莫烦大神的代码，和本机运行的可视化结果和操作。学习视频：Tensorflow 搭建自己的神经网络 (莫烦 Python 教程)https://www.bilibili.com/video/av16001891系统环境：Win7 64位 ..._pycharm tensorflow 运行状态

C++STL中map内存彻底释放方法_c++ map 手动释放-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏46次。最近遇到一个特别占内存的需求。使用STL map/unordered_map，内存无法得到正确释放。再次响应请求，会出现内存溢出的情况。[6453149.107435] Memory cgroup out of memory: Kill process 54949 (******) score 1001 or sacrifice child[6453149.117193] Killed p..._c++ map 手动释放

Qt小例子学习75 - 把QGraphicsItem 保存到文本然后读出来显示_qt qgraphicspathitem 保存读取saveitem-程序员宅基地

文章浏览阅读768次。Qt小例子学习75 - 把QGraphicsItem 保存到文本然后读出来显示#include "utils.h"#include <QApplication>#include <QDebug>#include <QFile>#include <QGraphicsLineItem>#include <QGraphicsScene>#include <QGraphicsView>#include <QTimer&g_qt qgraphicspathitem 保存读取saveitem