CSS实现一个自定义的滚动条
要使用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创建一个自定义的滚动条，你可以使用伪元素和CSS的伪类来控制滚动条的外观和行为。以下是一个简单的例子，展示如何为任何HTML元素添加一个自定义的滚动条样式： <!DOCTYPE html> <html lang"en"> <head> …...
CKA认证 | Day8 K8s安全
第八章 Kubernetes安全 1、Kubernetes RBAC授权 Kubernetes 基于角色的访问控制（Role-Based Access Control, RBAC） 是一种强大的权限管理机制，用于控制用户、用户组、服务账户对 Kubernetes 集群资源的访问。通过 RBAC，可以细…...
深度分析java 使用 proguard 如何解析混淆后的堆栈
经过proguard混淆过后，发生异常时堆栈也进行了混淆，那么如果获取的原始的堆栈呢？我们下面来看下 使用proguard 根据mapping文件直接解析 import proguard.obfuscate.MappingReader; import proguard.retrace.FrameInfo; import proguard.re…...
bash 中 ${-#*i} 是什么意思?
-------------------------------------------------- author: hjjdebug date: 2024年 12月 25日 星期三 17:43:45 CST description: bash 中 ${-#*i} 是什么意思? -------------------------------------------------- 在centos 的 /etc/profile 中有这样的语句 for i in /…...
什么是Top-p采样与Top-k采样？大模型推理时如何同时设置？解析Transformers库源代码
什么是Top-p采样与Top-k采样？大模型推理时如何同时设置？ 在自然语言生成（NLG）和大规模语言模型推理中，Top-k采样 和 Top-p采样 是两种常用的解码策略，用于控制生成文本的多样性和质量。它们在生成过程中对…...
java队列--数据结构
文章目录 前言本文源代码网址：https://gitee.com/zfranklin/java/tree/master/dataStructure/src/com/njupt/queue队列的性质数组队列成员变量方法 链表栈成员变量方法 总结 前言 顺序表和链表两种存储方式实现数据结构–队列。 本文源代码网址：https:/…...
【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…...
【踩坑/Linux】Vmware中的Ubuntu虚拟机无法访问互联网
Vmware中的Ubuntu虚拟机无法访问互联网 首先前提是我的系统是Ubuntu 16.04系统，vmware workstation选择的是NAT模式，虚拟机内连不上网络 ping www.baidu.com ping: unknown host www.baidu.com首先检查 DNS 解析服务：在虚拟机中打开命令提示…...
overleaf中的includegraphics设置图片缩放，居中显示
overleaf中的includegraphics设置图片缩放，居中显示 \includegraphics[width=0.5\textwidth]{example.jpg} \centering 在使用 \includegraphics 命令插入图片时，可以通过设置其参数来缩小图片的显示尺寸，以下是几种常见的方法： 设置宽度或高度 按比例缩小宽度：可以使用…...
IPv6的地址类型
IPv6地址总长度为128bit，被分为8组，每组为4个十六进制数，用冒号分隔： 例如：FC00:0123:4567:8901:ABFD:0987:0000:0023 可缩写为：FC00:0123:4567:8901:ABFD:0987::23 IPv6中取消了v4中的广播，新…...
Elasticsearch：analyzer（分析器）
一、概述 可用于将字符串字段转换为单独的术语： 添加到倒排索引中，以便文档可搜索。级查询（如 生成搜索词的 match查询）使用。 分析器分为内置分析器和自定义的分析器，它们都是由若干个字符过滤器（chara…...
【工作感悟】
1、不返工 - 复述任务 避免返工的前提是先把事情弄清楚，怎么弄清楚，要问到每个细节，怎么确保每个细节都问到了，把要做的事情复述一遍，有必要的话再讲述一下自己打算怎么做；及时对齐工作进度可以避免出错 …...
事件（event） SystemVerilog
1.定义 在数字逻辑仿真中，事件（event） 是一种机制，用于触发模型中的更新或计算。这种机制是仿真器用来追踪信号的变化以及调度进程执行的核心。 2.分类 事件可以分为以下两种类型： 更新事件（Update Even…...
【MySQL学习笔记】关于索引
文章目录 【MySQL学习笔记】关于索引1.索引数据结构2.索引存储3.联合索引3.1 联合索引的b树结构3.2 索引覆盖？回表？3.3 联合索引最左匹配原则3.5 索引下推 4.索引失效 【MySQL学习笔记】关于索引 1.索引数据结构 索引是一种能提高查询速度的数据结构。…...
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: …...
7-1求逆序对数目
目录 题目描述 输入样例: 输出样例: 逆序对的含义： 具体思路： 归并排序： 求逆序对： 代码实现： 对于mid-z1举个例子 题目描述 注意：本问题算法的时间复杂度要求为O(nlogn), 否则得分无效 题目来源ÿ…...
C# 中 Webclient和Httpclient
在C#中，WebClient和HttpClient，这两个类都是用于发起HTTP请求的客户端，它们在使用API上传文件或数据时有不同的优缺点和应用场景。在C#中WebClient是一种较早的网络客户端，而HttpClient是后期提供的更现代的、功能更强大的HTTP客户…...
cesium入门学习三
这期主要学习一下鼠标点击事件以及鼠标滚轮事件。 学习目录总结： cesium入门学习一-CSDN博客 cesium入门学习二-CSDN博客 1.鼠标事件 1.1 点击鼠标左键显示经度、纬度、高度 效果： js代码： var viewer new Cesium.Viewer(cesiumConta…...
swagger，showdoc，apifox，Mock 服务，dubbo，ZooKeeper和dubbo的关系
Swagger、ShowDoc 和 Apifox 之间的区别与优势 Swagger、ShowDoc 和 Apifox 都是用于 API 文档管理和测试的工具，但它们各有特色和适用场景。以下是详细的比较，并附上每个工具的具体用法示例。 1. Swagger 特点与优势： 广泛采用: Swagger…...
【自信息、信息熵、联合熵、条件熵、互信息】
文章目录 一、自信息 I(X)二、信息熵：衡量系统的混乱程度信息熵 H(X)联合熵 H(X,Y) 三、条件熵H(Y|X) 联合熵H(X,Y) - 信息熵H(X)四、互信息 I(X,Y)五、总结References 一、自信息 I(X) 自信息(Self-information) 是由香农提出的，用来衡量单一事件发生…...
探索XPopup：一款强大的Android弹窗库，让UI交互更灵动
探索XPopup：一款强大的Android弹窗库，让UI交互更灵动 【免费下载链接】XPopup 🔥XPopup2.0版本重磅来袭，2倍以上性能提升，带来可观的动画性能优化和交互细节的提升！！！功能强大&#…...
PyFlow多线程编程：SingletonThreadSampleNode的完整实现指南
PyFlow多线程编程：SingletonThreadSampleNode的完整实现指南 【免费下载链接】PyFlow Visual scripting framework for python 项目地址: https://gitcode.com/gh_mirrors/py/PyFlow PyFlow作为Python的视觉化脚本框架，为开发者提供了直观的节点编…...
Pixel Aurora Engine实战应用：像素游戏道具图标（武器/药水/装备）批量生成
Pixel Aurora Engine实战应用：像素游戏道具图标（武器/药水/装备）批量生成 1. 像素游戏道具生成的痛点与解决方案 独立游戏开发者经常面临一个共同挑战：如何高效制作大量风格统一的像素艺术道具图标。传统手工绘制方式存在三个主…...
深求·墨鉴（DeepSeek-OCR-2）惊艳效果：书法题跋+钤印位置+行气关系可视化还原
深求墨鉴（DeepSeek-OCR-2）惊艳效果：书法题跋钤印位置行气关系可视化还原 1. 引言：当OCR遇见水墨美学 你有没有遇到过这样的场景？面对一幅珍贵的书法作品或古籍文献，想要将其中的文字内容数字化࿰…...
别再只建网站了！宝塔面板的‘Node项目’功能，让你的Express/Koa后端服务上线更简单
解锁宝塔面板的隐藏技能：Node.js后端服务一键部署实战指南 你是否还在为Node.js项目的繁琐部署流程而头疼？手动配置PM2、Nginx反向代理、环境变量设置...这些操作不仅耗时耗力，还容易出错。其实，你每天都在使用的宝塔面板早已内置…...
别再重装系统了！用GParted给Ubuntu 20.04根目录无损扩容（Win11+Ubuntu双系统适用）
双系统用户必备：Ubuntu根目录无损扩容实战指南 1. 当根目录空间告急时 作为一名长期使用Win11Ubuntu双系统的开发者，我深刻理解那种看着根目录空间一点点被蚕食的焦虑。特别是进行深度学习训练或大型项目编译时，几十GB的空间转眼间就被占满。…...
JeecgBoot启动配置
一、引入maven指定自己的maven仓库 二、指定JDK 记得apply！！！！然后OK 三、配置MySQL数据库(尽量≥5.7版本) 四、运行db文件夹下的SQL文件 五、后端本地环境（application-dev.yml）指定好数据源 1、M…...
电商网站SEO网站结构应该如何设计
电商网站SEO网站结构设计的关键点 在当今数字化时代，电商网站的成功离不开搜索引擎优化（SEO）。一个精心设计的网站结构不仅能提升网站的用户体验，还能大大提高在搜索引擎上的排名。电商网站SEO网站结构应该如何设计呢？…...
S03TodoWrite - 任务规划：没有计划的 Agent 会迷失方向
核心理念 “没有计划的 Agent 走哪算哪” – 先列步骤再动手，完成率翻倍。 源码：https://github.com/xiayongchao/learn-claude-code-4j/blob/main/src/main/java/org/jc/agents/S03TodoWrite.java原版：https://github.com/shareAI-lab/lea…...
PyAutoGUI实战：给你的旧软件做个‘外挂’，自动完成游戏日常或软件测试
PyAutoGUI实战：用Python打造智能自动化助手，解放双手提升效率 在数字时代，重复性任务如同无形的枷锁，消耗着我们的时间和精力。想象一下，每天打开电脑后，你需要重复点击十几个相同的按钮，填写相…...