当前位置： 首页 > news >正文

CSS实现一个自定义的滚动条

news 2026/2/9 13:56:10

要使用CSS创建一个自定义的滚动条，你可以使用伪元素和CSS的伪类来控制滚动条的外观和行为。以下是一个简单的例子，展示如何为任何HTML元素添加一个自定义的滚动条样式：

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 容器样式，设置一个固定的高度 */
.custom-scrollbar {width: 200px;height: 200px;overflow: auto; /* 触发滚动条 */position: relative; /* 伪元素定位的基础 */
}/* 滚动条轨道 */
.custom-scrollbar::-webkit-scrollbar-track {background: #f1f1f1; /* 轨道颜色 */
}/* 滚动条滑块 */
.custom-scrollbar::-webkit-scrollbar-thumb {background: #888; /* 滑块颜色 */
}/* 滑块在悬停时的颜色 */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {background: #555; /* 悬停时颜色 */
}
</style>
</head>
<body><div class="custom-scrollbar"><!-- 这里放置超出容器高度的内容 --><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p><p>...</p><!-- 更多内容 -->
</div></body>
</html>
 

 

在这个例子中，.custom-scrollbar 是一个带有 overflow: auto 属性的容器，它触发了滚动条的出现。::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 是两个伪元素，分别用于定义滚动条的轨道和滑块。::-webkit-scrollbar-thumb:hover 用于在滑块悬停时改变其颜色。
 

请注意，自定义滚动条目前仅在基于WebKit的浏览器（如Chrome和Safari）中受支持。对于Firefox，你需要使用 -moz- 前缀，而在IE中，自定义滚动条则不被支持。
 

以下是对伪元素的简要说明：
 

  • ::-webkit-scrollbar-track：这是滚动条轨道的样式。
  • ::-webkit-scrollbar-thumb：这是滚动条滑块的样式。
  • ::-webkit-scrollbar-thumb:hover：这是滑块在鼠标悬停时的样式。














相关文章：
















CSS实现一个自定义的滚动条




要使用CSS创建一个自定义的滚动条&#xff0c;你可以使用伪元素和CSS的伪类来控制滚动条的外观和行为。以下是一个简单的例子&#xff0c;展示如何为任何HTML元素添加一个自定义的滚动条样式&#xff1a; <!DOCTYPE html>
<html lang"en">
<head>
…...






编程日记
2024/12/28 15:26:18



















CKA认证 | Day8 K8s安全




第八章 Kubernetes安全  
1、Kubernetes RBAC授权 
Kubernetes 基于角色的访问控制&#xff08;Role-Based Access Control, RBAC&#xff09; 是一种强大的权限管理机制&#xff0c;用于控制用户、用户组、服务账户对 Kubernetes 集群资源的访问。通过 RBAC&#xff0c;可以细…...






编程日记
2024/12/28 15:21:12



















深度分析java 使用 proguard 如何解析混淆后的堆栈




经过proguard混淆过后&#xff0c;发生异常时堆栈也进行了混淆&#xff0c;那么如果获取的原始的堆栈呢&#xff1f;我们下面来看下 
使用proguard 根据mapping文件直接解析 
import proguard.obfuscate.MappingReader;
import proguard.retrace.FrameInfo;
import proguard.re…...






编程日记
2024/12/28 15:18:10



















bash 中 ${-#*i} 是什么意思?




-------------------------------------------------- author: hjjdebug date:   2024年 12月 25日 星期三 17:43:45 CST description: bash 中 ${-#*i} 是什么意思? -------------------------------------------------- 在centos 的 /etc/profile 中有这样的语句 for i in /…...






编程日记
2024/12/28 15:17:08



















什么是Top-p采样与Top-k采样？大模型推理时如何同时设置？解析Transformers库源代码




什么是Top-p采样与Top-k采样&#xff1f;大模型推理时如何同时设置&#xff1f; 
在自然语言生成&#xff08;NLG&#xff09;和大规模语言模型推理中&#xff0c;Top-k采样 和 Top-p采样 是两种常用的解码策略&#xff0c;用于控制生成文本的多样性和质量。它们在生成过程中对…...






编程日记
2024/12/28 15:13:04



















java队列--数据结构




文章目录 前言本文源代码网址&#xff1a;https://gitee.com/zfranklin/java/tree/master/dataStructure/src/com/njupt/queue队列的性质数组队列成员变量方法 链表栈成员变量方法 总结 前言 
顺序表和链表两种存储方式实现数据结构–队列。 本文源代码网址&#xff1a;https:/…...






编程日记
2024/12/28 15:12:02



















【WebSocket】tomcat内部处理websocket的过程




websocket请求格式 
浏览器请求 
GET /webfin/websocket/ HTTP/1.1。 Host: localhost。 Upgrade: websocket。 Connection: Upgrade。 Sec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg。 Origin:  http://服务器地址。 Sec-WebSocket-Version: 13。 
服务器响应 
HTTP/1.1 101 Swi…...






编程日记
2024/12/28 15:10:00



















【踩坑/Linux】Vmware中的Ubuntu虚拟机无法访问互联网




Vmware中的Ubuntu虚拟机无法访问互联网 首先前提是我的系统是Ubuntu 16.04系统&#xff0c;vmware workstation选择的是NAT模式&#xff0c;虚拟机内连不上网络 
ping www.baidu.com
ping: unknown host www.baidu.com首先检查 DNS 解析服务&#xff1a;在虚拟机中打开命令提示…...






编程日记
2024/12/28 14:57:48



















overleaf中的includegraphics设置图片缩放，居中显示




overleaf中的includegraphics设置图片缩放，居中显示 
\includegraphics[width=0.5\textwidth]{example.jpg} \centering 在使用 \includegraphics 命令插入图片时，可以通过设置其参数来缩小图片的显示尺寸，以下是几种常见的方法： 
设置宽度或高度 按比例缩小宽度：可以使用…...






编程日记
2024/12/28 14:56:46



















IPv6的地址类型




IPv6地址总长度为128bit&#xff0c;被分为8组&#xff0c;每组为4个十六进制数&#xff0c;用冒号分隔&#xff1a; 例如&#xff1a;FC00:0123:4567:8901:ABFD:0987:0000:0023 可缩写为&#xff1a;FC00:0123:4567:8901:ABFD:0987::23  
IPv6中取消了v4中的广播&#xff0c;新…...






编程日记
2024/12/28 14:52:40



















Elasticsearch：analyzer（分析器）




一、概述 
可用于将字符串字段转换为单独的术语&#xff1a; 
添加到倒排索引中&#xff0c;以便文档可搜索。级查询&#xff08;如 生成搜索词的 match查询&#xff09;使用。 
分析器分为内置分析器和自定义的分析器&#xff0c;它们都是由若干个字符过滤器&#xff08;chara…...






编程日记
2024/12/28 14:50:39



















【工作感悟】




1、不返工 - 复述任务 
避免返工的前提是先把事情弄清楚&#xff0c;怎么弄清楚&#xff0c;要问到每个细节&#xff0c;怎么确保每个细节都问到了&#xff0c;把要做的事情复述一遍&#xff0c;有必要的话再讲述一下自己打算怎么做&#xff1b;及时对齐工作进度可以避免出错 
…...






编程日记
2024/12/28 14:46:35



















事件（event） SystemVerilog




1.定义 
在数字逻辑仿真中&#xff0c;事件&#xff08;event&#xff09; 是一种机制&#xff0c;用于触发模型中的更新或计算。这种机制是仿真器用来追踪信号的变化以及调度进程执行的核心。 
2.分类 
事件可以分为以下两种类型&#xff1a; 更新事件&#xff08;Update Even…...






编程日记
2024/12/28 14:45:34



















【MySQL学习笔记】关于索引




文章目录 【MySQL学习笔记】关于索引1.索引数据结构2.索引存储3.联合索引3.1 联合索引的b树结构3.2 索引覆盖&#xff1f;回表&#xff1f;3.3 联合索引最左匹配原则3.5 索引下推 4.索引失效 【MySQL学习笔记】关于索引 
1.索引数据结构 
索引是一种能提高查询速度的数据结构。…...






编程日记
2024/12/28 14:43:32



















APIs-day3




1.全选反选案例 
<head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width,initial-scale1.0"><title>练习</title><style>*{margin: 0;padding: 0;}table{margin: 100px auto;width: …...






编程日记
2024/12/28 14:33:15



















7-1求逆序对数目




目录 题目描述 输入样例: 输出样例: 逆序对的含义&#xff1a; 具体思路&#xff1a; 归并排序&#xff1a; 求逆序对&#xff1a; 代码实现&#xff1a; 对于mid-z1举个例子  题目描述 注意&#xff1a;本问题算法的时间复杂度要求为O(nlogn), 否则得分无效 题目来源&#xff…...






编程日记
2024/12/28 14:28:10



















C# 中 Webclient和Httpclient




在C#中&#xff0c;WebClient和HttpClient&#xff0c;这两个类都是用于发起HTTP请求的客户端&#xff0c;它们在使用API上传文件或数据时有不同的优缺点和应用场景。在C#中WebClient是一种较早的网络客户端&#xff0c;而HttpClient是后期提供的更现代的、功能更强大的HTTP客户…...






编程日记
2024/12/28 14:26:06



















cesium入门学习三




这期主要学习一下鼠标点击事件以及鼠标滚轮事件。 
学习目录总结&#xff1a; 
cesium入门学习一-CSDN博客 
cesium入门学习二-CSDN博客 
1.鼠标事件 
1.1 点击鼠标左键显示经度、纬度、高度 
效果&#xff1a; js代码&#xff1a; 
var viewer  new Cesium.Viewer(cesiumConta…...






编程日记
2024/12/28 14:25:04



















swagger，showdoc，apifox，Mock 服务，dubbo，ZooKeeper和dubbo的关系




Swagger、ShowDoc 和 Apifox 之间的区别与优势 
Swagger、ShowDoc 和 Apifox 都是用于 API 文档管理和测试的工具&#xff0c;但它们各有特色和适用场景。以下是详细的比较&#xff0c;并附上每个工具的具体用法示例。 
1. Swagger 
特点与优势&#xff1a; 
广泛采用: Swagger…...






编程日记
2024/12/28 14:24:03



















【自信息、信息熵、联合熵、条件熵、互信息】




文章目录 一、自信息 I(X)二、信息熵&#xff1a;衡量系统的混乱程度信息熵 H(X)联合熵 H(X,Y) 三、条件熵H(Y|X)  联合熵H(X,Y) - 信息熵H(X)四、互信息 I(X,Y)五、总结References 一、自信息 I(X) 
自信息(Self-information) 是由香农提出的&#xff0c;用来衡量单一事件发生…...






编程日记
2024/12/28 14:18:57





















中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试




作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...






编程新知
2026/1/22 15:36:10



















IGP（Interior Gateway Protocol，内部网关协议）




IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...






编程新知
2025/10/12 11:54:26



















转转集团旗下首家二手多品类循环仓店“超级转转”开业




6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 
转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 
据「TMT星球」了解&#xff0c;“超级…...






编程新知
2026/2/8 4:08:40



















页面渲染流程与性能优化




页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 
1. 构建DOM树 
浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; 
(…...






编程新知
2026/1/31 11:58:35



















sqlserver 根据指定字符 解析拼接字符串




DECLARE LotNo NVARCHAR(50)A,B,C       DECLARE xml XML  (         SELECT <x>  REPLACE(LotNo, ,, </x><x>)  </x>         )         DECLARE ErrorCode NVARCHAR(50)         -- 提取 XML 中的值         SELECT value  x.value(., VARCHAR(MAX))…...






编程新知
2025/10/29 4:33:03



















IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)




文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...






编程新知
2026/1/31 23:44:39



















短视频矩阵系统文案创作功能开发实践，定制化开发




在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...






编程新知
2026/2/1 8:24:29



















JVM虚拟机：内存结构、垃圾回收、性能优化




1、JVM虚拟机的简介 
Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...






编程新知
2026/2/7 0:37:40



















CSS | transition 和 transform的用处和区别




省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 
transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 
旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜  skewX(角度…...






编程新知
2025/10/17 20:59:57



















解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用




在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...






编程新知
2026/2/3 15:45:51