CSS通过webkit-scrollbar设置滚动条样式
查看::-webkit-scrollbar-*各项关系
以下图为例，可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。
需要先给外部容器设置高度，再设置overflow: auto，最后设置三个webkit属性。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{margin: 50px;width: 200px;height: 300px;border: 1px solid #000;background-color: #ddd;overflow: auto;/* 显示滚动条*/ }/* 定义滚动条 */::-webkit-scrollbar{width: 50px;background: rgb(43, 239, 25);}/* 定义滚动轨道 */::-webkit-scrollbar-track{background: rgb(250, 81, 81);border-radius: 10px;}/* 定义滚动滑块 */::-webkit-scrollbar-thumb{background: orange;border-radius: 20px;}</style>
</head>
<body><div class="container"><p>南京师范大学地理科学学院溯源于1902年三江师范学堂历史舆地科，1919年后历经南京高等师范学校国文史地部、国立东南大学地学系、国立中央大学地理系、南京大学地理系等阶段。1952年全国院系调整之际，时任南京大学地理系主任的李旭旦教授偕金祖孟、陆漱芬等先生至南京师范学院创办地理系。1997年江苏省教育委员会批准组建了当时国内第一家地理科学学院。2017年入选国家“双一流”建设学科，2018年地球科学学科进入ESI前1%。2022年再次入选国家“双一流”建设学科。学院始终高举地理学大旗，以国家一流学科和国家重点学科建设为主导、以高水平队伍建设和创新创业人才培养为根本，以科研条件与平台建设为基础，以产学研相结合为动力，脚踏实地建设一流的学科、一流的平台和一流的学院。</p><p>学院拥有地理学国家一流建设学科，地图学与地理信息系统国家级重点学科和人文地理学国家重点（培育）学科，地理信息系统江苏省重中之重学科，自然地理学和人文地理学江苏省重点学科，地理学江苏省一级重点学科和江苏省高校优势学科。拥有虚拟地理环境教育部重点实验室、警用地理信息技术公安部重点实验室、国家地球系统科学数据中心长江三角洲分中心、江苏省地理环境演化国家重点实验室培育建设点、江苏省地理信息资源开发与利用协同创新中心、环境演变与生态建设江苏省重点实验室、地理信息科学江苏省重点实验室、物质循环与污染控制江苏省重点实验室、地理空间信息技术江苏省工程中心、江苏省区域发展与规划研究中心等省部级科研机构，为开展科学研究提供了高水平的优质平台。</p></div>
</body>
</html>
设置简单的、窄的滚动条
/* 定义滚动条 */::-webkit-scrollbar{width: 10px;border-radius: 10px;background: rgb(198, 198, 198);}/* 定义滚动轨道 */::-webkit-scrollbar-track{background: rgb(198, 198, 198);border-radius: 10px;}/* 定义滚动滑块 */::-webkit-scrollbar-thumb{background: rgb(103, 103, 103);border-radius: 10px;}
只对某个滚动条设置样式
在::-webkit-scrollbar等三个伪元素前面添加自定义类的限制：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{margin: 50px;padding: 10px;width: 200px;height: 300px;border: 1px solid #000;background-color: #ddd;overflow: auto;/* 显示滚动条*/ float: left;}/* 定义滚动条 */.scroll::-webkit-scrollbar{width: 10px;border-radius: 10px;background: rgb(198, 198, 198);}/* 定义滚动轨道 */.scroll::-webkit-scrollbar-track{background: rgb(198, 198, 198);border-radius: 10px;}/* 定义滚动滑块 */.scroll::-webkit-scrollbar-thumb{background: rgb(103, 103, 103);border-radius: 10px;}</style>
</head>
<body><div class="container scroll"><p>南京师范大学地理科学学院溯源于1902年三江师范学堂历史舆地科，1919年后历经南京高等师范学校国文史地部、国立东南大学地学系、国立中央大学地理系、南京大学地理系等阶段。1952年全国院系调整之际，时任南京大学地理系主任的李旭旦教授偕金祖孟、陆漱芬等先生至南京师范学院创办地理系。1997年江苏省教育委员会批准组建了当时国内第一家地理科学学院。2017年入选国家“双一流”建设学科，2018年地球科学学科进入ESI前1%。2022年再次入选国家“双一流”建设学科。学院始终高举地理学大旗，以国家一流学科和国家重点学科建设为主导、以高水平队伍建设和创新创业人才培养为根本，以科研条件与平台建设为基础，以产学研相结合为动力，脚踏实地建设一流的学科、一流的平台和一流的学院。</p><p>学院拥有地理学国家一流建设学科，地图学与地理信息系统国家级重点学科和人文地理学国家重点（培育）学科，地理信息系统江苏省重中之重学科，自然地理学和人文地理学江苏省重点学科，地理学江苏省一级重点学科和江苏省高校优势学科。拥有虚拟地理环境教育部重点实验室、警用地理信息技术公安部重点实验室、国家地球系统科学数据中心长江三角洲分中心、江苏省地理环境演化国家重点实验室培育建设点、江苏省地理信息资源开发与利用协同创新中心、环境演变与生态建设江苏省重点实验室、地理信息科学江苏省重点实验室、物质循环与污染控制江苏省重点实验室、地理空间信息技术江苏省工程中心、江苏省区域发展与规划研究中心等省部级科研机构，为开展科学研究提供了高水平的优质平台。</p></div><div class="container"><p>南京师范大学地理科学学院溯源于1902年三江师范学堂历史舆地科，1919年后历经南京高等师范学校国文史地部、国立东南大学地学系、国立中央大学地理系、南京大学地理系等阶段。1952年全国院系调整之际，时任南京大学地理系主任的李旭旦教授偕金祖孟、陆漱芬等先生至南京师范学院创办地理系。1997年江苏省教育委员会批准组建了当时国内第一家地理科学学院。2017年入选国家“双一流”建设学科，2018年地球科学学科进入ESI前1%。2022年再次入选国家“双一流”建设学科。学院始终高举地理学大旗，以国家一流学科和国家重点学科建设为主导、以高水平队伍建设和创新创业人才培养为根本，以科研条件与平台建设为基础，以产学研相结合为动力，脚踏实地建设一流的学科、一流的平台和一流的学院。</p><p>学院拥有地理学国家一流建设学科，地图学与地理信息系统国家级重点学科和人文地理学国家重点（培育）学科，地理信息系统江苏省重中之重学科，自然地理学和人文地理学江苏省重点学科，地理学江苏省一级重点学科和江苏省高校优势学科。拥有虚拟地理环境教育部重点实验室、警用地理信息技术公安部重点实验室、国家地球系统科学数据中心长江三角洲分中心、江苏省地理环境演化国家重点实验室培育建设点、江苏省地理信息资源开发与利用协同创新中心、环境演变与生态建设江苏省重点实验室、地理信息科学江苏省重点实验室、物质循环与污染控制江苏省重点实验室、地理空间信息技术江苏省工程中心、江苏省区域发展与规划研究中心等省部级科研机构，为开展科学研究提供了高水平的优质平台。</p></div>
</body>
</html>
相关文章：
CSS通过webkit-scrollbar设置滚动条样式
查看::-webkit-scrollbar-*各项关系 以下图为例，可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。 需要先给外部容器设置高度，再设置overflow: auto，最后设置三个webkit属性。 <!DOCTYPE html> <html lang"en">…...
Win10配置VSCode的C/C++编译环境
GNU（编译器工具集合）包含了g、gcc和gdb等编译器。MinGW（Minimalist GNU for Windows）是一个适用于Windows操作系统的最小化的GNU工具集，它包括了GCC编译器（包括g）以及其他一些必要的库和工具。M…...
数据结构与算法再探（七）查找-排序
查找 一、二分查找 二分查找是一种高效的查找算法，适用于在已排序的数组或列表中查找特定元素。它通过将搜索范围逐步减半来快速定位目标元素。理解二分查找的“不变量”和选择左开右闭区间的方式是掌握这个算法的关键。 二分查找关键点 不变量 在二分查找中&a…...
【C语言】指针(5)
前言：上篇文章的末尾我们使用了转移表来解决代码冗余的问题，那我们还有没有什么办法解决代码冗余呢？有的这就是接下来要说的回调函数。 往期文章: 指针1 指针2 指针3 指针4 文章目录 一，回调函数二，qsort实现快速排序1…...
大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(2)
Paimon的下载及安装，并且了解了主键表的引擎以及changelog-producer的含义参考： 大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(1) 利用Paimon表做lookup join，集成mysql cdc等参考： 大数据组件(四)快速入门实时数据…...
PLC通讯
PPI通讯 是西门子公司专为s7-200系列plc开发的通讯协议。内置于s7-200 CPU中。PPI协议物理上基于RS-485口，通过屏蔽双绞线就可以实现PPI通讯。PPI协议是一种主-从协议。主站设备发送要求到从站设备，从站设备响应，从站不能主动发出信息。主站…...
前端js进阶，ES6语法，包详细
进阶ES6 作用域的概念加深对js理解 let、const申明的变量，在花括号中会生成块作用域，而var就不会生成块作用域 作用域链本质上就是底层的变量查找机制 作用域链查找的规则是:优先查找当前作用域先把的变量，再依次逐级找父级作用域直到全局…...
Scrum方法论指导下的Deepseek R1医疗AI部署开发
一、引言 1.1 研究背景与意义 在当今数智化时代，软件开发方法论对于项目的成功实施起着举足轻重的作用。Scrum 作为一种广泛应用的敏捷开发方法论，以其迭代式开发、快速反馈和高效协作的特点，在软件开发领域占据了重要地位。自 20 世纪 90 …...
LINUX安装使用Redis
参考 Install Redis on Linux | Docs 安装命令 sudo apt-get install -y lsb-release curl gpgcurl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpgsudo chmod 644 /usr/share/keyrings/redis-archive-keyrin…...
基于java新闻管理系统，推荐一款开源cms内容管理系统ruoyi-fast-cms
一、项目概述 1.1 项目背景 在信息高速流通的当下，新闻媒体行业每天都要处理和传播海量信息。传统的新闻管理模式依赖人工操作，在新闻采集、编辑、发布以及后续管理等环节中，不仅效率低下，而且容易出现人为失误。同时࿰…...
054 redisson
文章目录 使用Redisson演示可重入锁读写锁信号量闭锁获取三级分类redisson分布式锁 package com.xd.cubemall.product.config;import org.redisson.Redisson; import org.redisson.api.RedissonClient; import org.redisson.config.Config; import org.springframework.context…...
【数据结构】(12) 反射、枚举、lambda 表达式
一、反射 1、反射机制定义及作用 反射是允许程序在运行时检查和操作类、方法、属性等的机制，能够动态地获取信息、调用方法等。换句话说，在编写程序时，不需要知道要操作的类的具体信息，而是在程序运行时获取和使用。 2、反射机制…...
java实现二维码图片生成和编解码
java实现二维码图片生成和编解码 在wutool中，封装了二维码工具类，基于google的zxing库，实现二维码图片生成、编码和解码。 关于wutool wutool是一个java代码片段收集库，针对特定场景提供轻量解决方案，只要按需选择代…...
Java基础常见的面试题（易错！！）
面试题一：为什么 Java 不支持多继承 Java 不支持多继承主要是为避免 “菱形继承问题”（又称 “钻石问题”），即一个子类从多个父类继承到同名方法或属性时，编译器无法确定该调用哪个父类的成员。同时，多继承…...
hugging face---transformers包
一、前言 不同于计算机视觉的百花齐放，不同网络适用不同情况，NLP则由Transformer一统天下。transformer是2017年提出的一种基于自注意力机制的神经网络架构，transformers库是hugging face社区创造的一个py库，通过该库可以实现统一…...
网络安全防护指南：筑牢网络安全防线（510）
一、网络安全的基本概念 （一）网络的定义 网络是指由计算机或者其他信息终端及相关设备组成的按照一定的规则和程序对信息收集、存储、传输、交换、处理的系统。在当今数字化时代，网络已经成为人们生活和工作中不可或缺的一部分。它连接了世…...
微信小程序实现拉卡拉支付
功能需求：拉卡拉支付（通过跳转拉卡拉平台进行支付），他人支付（通过链接进行平台跳转支付） 1.支付操作 //支付 const onCanStartPay async (obj) > {uni.showLoading({mask: true})// 支付接口获取需要传…...
git从本地其他设备上fetch分支
在 Git 中，如果你想从本地其他设备上获取分支，可以通过以下几种方式实现。不过，需要注意的是，Git 本身是分布式版本控制系统，通常我们是从远程仓库（如 GitHub、GitLab 等）拉取分支，而…...
【干货教程】Windows电脑本地部署运行DeepSeek R1大模型（基于Ollama和Chatbox）
文章目录 一、环境准备二、安装Ollama2.1 访问Ollama官方网站2.2 下载适用于Windows的安装包2.3 安装Ollama安装包2.4 指定Ollama安装目录2.5 指定Ollama的大模型的存储目录 三、选择DeepSeek R1模型四、下载并运行DeepSeek R1模型五、常见问题解答六、使用Chatbox进行交互6.1 …...
基于 SSM框架 的 “捷邻小程序” 系统的设计与实现
大家好，今天要和大家聊的是一款基于 SSM框架 的 “捷邻小程序” 系统的设计与实现。项目源码以及部署相关事宜请联系我，文末附上联系方式。 项目简介 基于 SSM框架 的 “捷邻小程序” 系统设计与实现的主要使用者分为 管理员 和 用户，没有授…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...
相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
深入理解Optional：处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中，集合判空是一个常见但容易出错的场景。传统方式虽然可行，但存在一些潜在问题： // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
Vue ③-生命周期 || 脚手架
生命周期 思考：什么时候可以发送初始化渲染请求？（越早越好） 什么时候可以开始操作dom？（至少dom得渲染出来） Vue生命周期： 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...