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

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

news 2025/9/20 2:20:53

要使用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





















基于算法竞赛的c++编程（28）结构体的进阶应用




结构体的嵌套与复杂数据组织 
在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; 
struct Address {string city;string street;int zipCode;
};struct Employee {string name;int id;…...






编程新知
2025/6/17 5:30:27



















网络六边形受到攻击




大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...






编程新知
2025/9/18 4:22:58



















AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南




点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 
&#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 
目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...






编程新知
2025/9/19 14:15:17



















LeetCode - 394. 字符串解码




题目 
394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 
思路 
使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 
遍历输入字符串&#xff1a; 
数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...






编程新知
2025/9/9 15:01:44



















服务器硬防的应用场景都有哪些？




服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...






编程新知
2025/7/23 18:46:38



















Python爬虫（一）：爬虫伪装




一、网站防爬机制概述 
在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 
身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...






编程新知
2025/8/24 22:20:35



















【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）




🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 
在物联网实际项目中，**“终端 + 网关”**是…...






编程新知
2025/8/26 22:46:30



















三体问题详解




从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...






编程新知
2025/9/19 3:30:35



















NLP学习路线图（二十三）：长短期记忆网络（LSTM）




在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...






编程新知
2025/9/3 5:05:40



















OpenLayers 分屏对比(地图联动)




注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...






编程新知
2025/9/11 9:39:35