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框架 的 “捷邻小程序” 系统设计与实现的主要使用者分为 管理员 和 用户，没有授…...
YOLOv11涨点改进| CVPR 2026 | 独家创新首发、Conv改进篇| 全新TMConv三角掩码卷积模块，轻量化涨点改进，增强特征的空间感知能力，助力目标检测，图像去噪，图像分割有效涨点
一、本文介绍 🔥本文给大家介绍使用 TMConv三角掩码卷积模块 改进YOLOv11网络模型，在特征提取阶段通过限制卷积感受野，有效避免局部冗余信息和噪声干扰，使网络更加专注于来自有效上下文的特征表达，从而提升特征的判别能力。通过其非对称卷积结构和方向性信息建模能力，T…...
VCS仿真器下UVM调试实战：手把手解决uvm_hdl_force权限与$urandom_range范围溢出
VCS仿真器下UVM调试实战：手把手解决uvm_hdl_force权限与$urandom_range范围溢出 在芯片验证领域，UVM（Universal Verification Methodology）已成为事实上的标准。然而，当我们在Synopsys VCS这样的商业仿真器上实现UVM验…...
目前已经基本能给AI下达命令，并且接收命令返回内容了
所以，接下来只需要等他的人机验证自己跳出来，然后我录个视频，然后破解他，这个事情就算大功告成了，功能类似于openclaw，但是不用付钱，免费token。如果谁愿意给我钱，我就用付费的&…...
长沙金海中学答题：中天电子实现精准调控
课堂困境与答题需求长沙金海中学在传统教学模式中，面临着诸多答题相关的痛点。每次进行50题的答题测试，教师需要花费30分钟以上的时间进行人工批改，这不仅耗时耗力，还容易出现批改错误。同时，课堂互动参与率不足30%&am…...
AI专著撰写必备！实测8款AI工具，快速生成20万字专著且低查重率！
研究者专著创作困境与AI工具解决方案 对于多数研究者而言，编写学术专著常常面临最大的挑战，便是“有限的精力”与“无限的需求”之间的矛盾。撰写一本专著通常需要3到5年，甚至更长的时间，而研究者们平常还需要完成教学、科研项目…...
AvalancheGo网络通信：P2P协议和消息队列的实现原理
AvalancheGo网络通信：P2P协议和消息队列的实现原理 【免费下载链接】avalanchego Go implementation of an Avalanche node. 项目地址: https://gitcode.com/gh_mirrors/ava/avalanchego AvalancheGo是Avalanche节点的Go语言实现，其网络通信系统基…...
使用Python和YahooQuery增强财务数据分析
在数据分析领域，Python已经成为许多分析师和数据科学家的首选工具。尤其是在金融分析中，利用Python可以快速处理和分析大量财务数据。今天，我们将探讨如何使用yahooquery库结合财务报表数据与历史股价数据，从而为我们的分析提供更丰富的视角。 基本概念介绍 yahooquery是…...
51单片机数码管显示入门：从硬件接线到代码实战，手把手教你点亮第一个数字
51单片机数码管实战指南：从硬件搭建到动态显示的全流程解析 第一次拿到51单片机开发板和数码管时，那些密密麻麻的引脚和杜邦线确实让人望而生畏。记得我刚开始接触时，花了整整一个下午才让第一个数字"0"亮起来。本文将带你避开所有…...
UML和面向对象
UML（统一建模语言，Unified Modeling Language）和面向对象（Object-Orientation）是软件工程中紧密相连的两个概念。面向对象是一种程序设计思想，而 UML 是一种可视化建模语言，用于表达面向对象分析（OOA）与设计（OOD）的成果。两者结合，使复杂系统的分析、设计、沟通和文…...
从MATLAB到FPGA：手把手教你用Verilog在Vivado里实现SVPWM（附死区时间配置）
从MATLAB到FPGA：SVPWM算法在Vivado中的Verilog实现全解析 在电机控制领域，空间矢量脉宽调制（SVPWM）技术因其电压利用率高、谐波含量低等优势，已成为变频驱动系统的核心算法。对于已经掌握MATLAB仿真的工程师而言&#…...