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

CSS通过webkit-scrollbar设置滚动条样式

article 2026/4/8 11:55:08

查看::-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-*各项关系 以下图为例&#xff0c;可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。 需要先给外部容器设置高度&#xff0c;再设置overflow: auto&#xff0c;最后设置三个webkit属性。 <!DOCTYPE html> <html lang"en">…...

编程日记 2026/4/5 2:47:53

Seata1.5.2学习(二)——使用分布式事务锁@GlobalLock

目录 一、创建数据库 二、配置consumer-service 1.pom.xml 2.application.properties 3.启动类 4.其他代码 三、配置provider-service 1.pom.xml 2.application.properties 3.启动类 4.其他代码 四、分布式事务问题演示与解决办法 (一)分布式事务问题演示 (二)…...

编程日记 2026/4/4 9:40:57

三级分类bug解决

文章目录 前端后端 前端 <!DOCTYPE html> <html xmlns:th"http://www.thymeleaf.org" lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&q…...

编程日记 2026/2/23 3:11:45

华为 网络安全 认证

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 华为 网络安全 认证&#xff1a;保障信息安全的重要一环 在数字化时代的今天&#xff0c;网络安全成为了企业和个人都需要高度重视的问题。尤其是在企业信息化的…...

编程日记 2026/4/6 20:16:15

企业金融数字场景平台：架构设计、实践与未来趋势

随着数字化转型的深入&#xff0c;企业金融领域正经历着前所未有的变革。中国民生银行信息科技部赵鑫团队提出的《企业金融数字场景平台》架构设计&#xff0c;不仅展现了金融科技的前沿应用&#xff0c;也为行业提供了宝贵的实践经验和未来发展的新视角。 架构设计&#xff1…...

编程日记 2026/4/4 14:08:57

网络运维学习笔记 019 HCIA-Datacom综合实验03

文章目录 综合实验3实验需求一&#xff1a;A公司网络规划二&#xff1a;B公司网络规划 配置一、ip、vlan、vlanif&#xff0c;stp、eth-trunkSW1SW2SW3R1 二、ospfSW1R1 三、NATR1ISP 四、拒绝ping允许httpSW1 五、右半部分vlan、dhcp、ospf、NATSW4R2 综合实验3 实验需求 一&…...

编程日记 2026/4/5 8:40:11

Python--函数进阶（上）

1. 参数深入理解 1.1 参数传递的内存机制 Python中参数传递的是内存地址&#xff08;引用传递&#xff09;&#xff0c;而非值拷贝。这意味着&#xff1a; 可变对象&#xff08;列表、字典&#xff09;在函数内修改会影响外部变量。不可变对象&#xff08;数字、字符串&…...

编程日记 2026/2/13 15:35:09

Linux 常见面试题汇总

在当今数字化时代&#xff0c;Linux 作为一种开源、稳定且高效的操作系统&#xff0c;在服务器领域占据着举足轻重的地位。无论是运维工程师、开发人员还是系统管理员&#xff0c;掌握 Linux 相关知识都成为了必备技能。这篇博客将为大家汇总一些常见的 Linux 面试题&#xff0…...

编程日记 2026/4/6 2:11:10

网络运维学习笔记 015网工初级（HCIA-Datacom与CCNA-EI）NAT网络地址转换

文章目录 NAT(Network Address Translation&#xff0c;网络地址转换)思科&#xff1a;1&#xff09;PAT2&#xff09;静态端口转换 华为&#xff1a;1&#xff09;EasyIP2&#xff09;NAT Server静态NAT&#xff1a;动态NAT&#xff1a;实验1&#xff1a;在R1上配置NAPT让内网…...

编程日记 2026/4/4 9:09:53

蓝桥杯刷题25.2.22|打卡

一、幸运数 3491 谨记&#xff1a;使用函数&#xff0c;拆分成多个小问题&#xff0c;不容易出错 #include <iostream> using namespace std; //计算位数 int check(int a){int count0;while(a){aa/10;count;}return count; } bool fun(int sum){int countcheck(sum);int…...

编程日记 2026/4/4 14:51:47

学习笔记-沁恒第五讲-米醋

一&#xff0c;设置音量 上次 这次 #include "uart.h" #include "debug.h" void audio_init() { Usart3_Init(); } void audio_play(u8 num) { u8 string[]{0x7e,0x05,0x41,0x00,num,0x05^0x41^0x00^num,0xef}; u8 i; for(i0;i<7;i) { USART_Se…...

编程日记 2026/2/23 20:46:38

骁勇善战的量化利器：多因子模型【量化理论】

我叫补三补四&#xff0c;很高兴见到大家&#xff0c;欢迎一起学习交流和进步 今天来讲一讲alpha策略制定后的测试问题 风险模型雏形 股票因子受多种因素影响&#xff0c;其价格由多种因素决定&#xff0c;所谓的多因子策略就是要发掘诸如此类的因子&#xff0c;以一种合理的方…...

编程日记 2026/4/7 20:39:06

Android Loader机制解析

参考: Android Loader 机制...

编程日记 2026/2/26 23:55:16

使用Docker部署SearXNG

SearXNG 搜索引擎 SearXNG 是一个整合了超过70个搜索服务结果的免费的私有互联网搜索引擎&#xff0c;用户不会被网站跟踪或被建立档案进行特征分析&#xff0c;良好地保障了用户的隐私。知识库可以有效地弥补大模型的知识欠缺问题&#xff0c;但依旧无法补充或弥补知识库和大…...

编程日记 2026/4/4 16:55:44

C# ConcurrentQueue 使用详解

总目录 前言 在C#多线程编程中&#xff0c;数据共享如同走钢丝——稍有不慎就会引发竞态条件&#xff08;Race Condition&#xff09;或死锁。传统Queue<T>在并发场景下需要手动加锁&#xff0c;而ConcurrentQueue<T>作为.NET Framework 4.0 引入的线程安全集合&a…...

编程日记 2026/2/25 20:02:10

armv7l

在 **ARMv7l** 中&#xff0c;最后的字符是字母 **“l”**&#xff08;小写字母 “L”&#xff09;&#xff0c;而不是数字 **“1”**。 --- ### 1. **ARMv7l 的含义** - **ARMv7**&#xff1a;指的是 **ARM 架构的第 7 代版本**&#xff0c;是一种广泛应用于嵌入式系统&…...

编程日记 2025/6/28 18:27:22

spring中关于Bean的复习（IOC和DI）

文章目录 1.spring程序开发步骤1.1 导入spring开发的基本包坐标1.2 编写Dao接口和实现类1.3 创建spring核心配置文件1.4 在spring配置文件中配置UserDaoImpl1.5 使用Spring的Api获得Bean实例 2. Bean实例化的三种方式2.1 无参构造方法实例化2.2 工厂静态方法实例化2.3 工厂实例…...

编程日记 2026/4/4 11:30:40

Docker内存芭蕾：优雅调整容器内存的极限艺术

title: “&#x1f4be; Docker内存芭蕾&#xff1a;优雅调整容器内存的极限艺术” author: “Cjs” date: “2025-2-23” emoji: “&#x1fa70;&#x1f4a5;&#x1f4ca;” 当你的容器变成内存吸血鬼时… &#x1f680; 完美内存编排示范 &#x1f4dc; 智能内存管家脚本…...

编程日记 2026/4/4 18:44:54

一周学会Flask3 Python Web开发-flask3上下文全局变量session,g和current_app

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili flask3提供了session,g和current_app上下文全局变量来方便我们操作访问数据。 以下是一个表格&#xff0c;用于比较Flask中的…...

编程日记 2026/4/5 3:45:13

【蓝桥杯单片机】客观题

一、第十三届省赛&#xff08;一&#xff09; 二、第十三届省赛&#xff08;二&#xff09;...

编程日记 2026/4/4 16:59:39

QT中经常出现的用法:组合

在 C 中&#xff0c;一个类包含另一个类的对象称为组合&#xff08; Composition &#xff09;。这是一种常见的设计模式&#xff0c;用 于表示一个类是由另一个类的对象组成的。这种关系通常表示一种 " 拥有 " &#xff08; "has-a" &#xff09;的关系。…...

编程日记 2026/4/4 16:58:22

下载CentOS 10

1. 进入官网&#xff1a;https://www.centos.org/ 2. 点击右上角的Download进入下载页面。 3. 选择对应的CPU架构&#xff0c;点击ISOs下面的Mirrors开始下载。...

编程日记 2026/4/5 16:37:43

第9章:LangChain让大模型结构化输出

文章详细介绍了LangChain4j中如何使用结构化输出&#xff08;Structured Outputs&#xff09;。主要内容包括&#xff1a; JSON Schema&#xff1a;通过指定JSON Schema&#xff0c;LLM可以生成符合结构的输出。工具&#xff08;Tools&#xff09;&#xff1a;通过工具调用实现…...

编程日记 2026/3/8 16:44:17

ES6 新特性，优势和用法？

ES6 新特性&#xff0c;优势和用法&#xff1f; ES6&#xff08;ECMAScript 2015&#xff09;引入了许多新特性&#xff0c;这些特性让 JavaScript 变得更加强大、简洁和易于使用。下面为你详细介绍一些常见的 ES6 新特性、它们的优势以及用法。 1. 块级作用域&#xff1a;le…...

编程日记 2026/3/21 14:34:29

简说spring 的设计模式

spring 的设计模式&#xff08;23种…) &#xff08;面试题&#xff09;说说BeanFactory和FactoryBean的实现原理和区别&#xff1f; spring 中你还知道哪些设计模式&#xff1f;&#xff1f; 1.简单工厂模式 实质&#xff1a; 由一个工厂类根据传入的参数&#xff0c;动态决…...

编程日记 2026/4/8 1:52:23

【 Avalonia UI 语言国际化 I18n】图文结合教学，保姆级教学，语言国际化就是这么简单(.Net C#)

完整项目地址 github : https://github.com/Crazy-GrowUp/AvaloniaI18nTest/tree/master gitee :https://gitee.com/jack_of_disco/avalonia-i18n-test 0.项目新建 Properties 文件夹 对应的项目配置文件里面就会增加 <Folder Include"Properties\" /> 1.项…...

编程日记 2026/4/8 2:34:56

Spring Boot 日志管理（官网文档解读）

摘要 本篇文章详细介绍了SpringBoot 日志管理相关的内容&#xff0c;文章主要参考官网文章的描述内容&#xff0c;并在其基础上进行一定的总结和拓展&#xff0c;以方便学习Spring Boot 的小伙伴能快速掌握Spring Boot 日志管理相关的内容。 日志实现方式 Sping Boot 的日志管…...

编程日记 2026/4/8 1:26:19

Nginx学习笔记：常用命令端口占用报错解决Nginx核心配置文件解读

Nginx 1. 基础命令1.1 重新加载systemd配置1.2 停止Nginx服务1.3 启动Nginx服务1.4 重启Nginx服务1.5 查看Nginx服务状态1.6 测试配置和重载Nginx 2. 额外命令2.1 启用开机自启2.2 禁用开机自启2.3 强制关闭所有Nginx进程 3. Nginx端口占用解决方案3.1 查找占用端口8090的进程3…...

编程日记 2026/3/17 1:26:53

【玩转 Postman 接口测试与开发2_020】（完结篇）DIY 实战：随书示例 API 项目本地部署保姆级搭建教程（含完整调试过程）

《API Testing and Development with Postman》最新第二版封面 文章目录 最新版《Postman 接口测试与开发实战》示例 API 项目本地部署保姆级搭建教程1 前言2 准备工作3 具体部署3.1 将项目 Fork 到自己名下3.2 创建虚拟环境并安装依赖3.3 初始运行与项目调试 4 示例项目的用法…...

编程日记 2026/4/7 9:01:34

高清下载油管视频到本地

下载工具并安装: yt-dlp官网地址&#xff1a; GitHub - yt-dlp/yt-dlp: A feature-rich command-line audio/video downloader ffmpeg官网地址&#xff1a; Download FFmpeg 注&#xff1a;记住为其添加环境变量 操作命令&#xff1a; 该指令表示以720p码率下载VIDEO_UR…...

编程日记 2026/3/16 14:46:58