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

【CSS】设置滚动条样式

文章目录

    • 基本语法
    • 用法案例

基本语法

在CSS中,可以使用 ::-webkit-scrollbar 和相关伪元素来为滚动条设置样式,但请注意这些伪元素是非标准的,主要用于WebKit内核浏览器(如Chrome、Safari)。
::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式,如果没有设置 overflow:scroll;,元素的滚动条将不会显示。

相关伪元素

  1. ::-webkit-scrollbar——整个滚动条。
  2. ::-webkit-scrollbar-button——滚动条上的按钮(上下箭头)。
  3. ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
  4. ::-webkit-scrollbar-track——滚动条轨道。
  5. ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
  6. ::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
  7. ::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。

对于Firefox等其他浏览器,可以使用标准的CSS滚动条样式属性。

scrollbar-color

描述
auto在没有任何其他相关滚动条颜色属性的情况下,滚动条的轨道部分的默认平台渲染。
<color> <color>将第一种颜色应用于滚动条滑块,第二种颜色应用于滚动条轨道。

scrollbar-width

描述
auto系统默认的滚动条宽度。
thin系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度。
none不显示滚动条,但是该元素依然可以滚动。

用法案例

/* 自定义整个滚动条 */
::-webkit-scrollbar {width: 12px; /* 设置滚动条的宽度 */
}/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {background: #f1f1f1; /* 设置轨道的背景颜色 */
}/* 自定义滚动条的滑块(thumb) */
::-webkit-scrollbar-thumb {background: #888; /* 设置滑块的背景颜色 */
}/* 当hover或active状态时,自定义滑块的颜色 */
::-webkit-scrollbar-thumb:hover {background: #555;
}

对于Firefox,可以使用以下属性:

/* 对于Firefox,自定义整个滚动条 */
* {scrollbar-width: thin; /* 可以是 'auto', 'thin', 'none' */scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

相关文章:

【CSS】设置滚动条样式

文章目录 基本语法用法案例 基本语法 在CSS中&#xff0c;可以使用 ::-webkit-scrollbar 和相关伪元素来为滚动条设置样式&#xff0c;但请注意这些伪元素是非标准的&#xff0c;主要用于WebKit内核浏览器&#xff08;如Chrome、Safari&#xff09;。 ::-webkit-scrollbar CSS …...

Gitlab-Runner配置

原理 Gitlab-Runner是一个非常强大的CI/CD工具。它可以帮助我们自动化执行各种任务&#xff0c;如构建、测试和部署等。Gitlab-Runner和Gitlab通过API通信&#xff0c;接收作业并提交到执行队列&#xff0c;Gitlab-Runner从队列中获取作业&#xff0c;并允许在不同环境下进行作…...

代码随想录 哈希 test 8

18. 四数之和 - 力扣&#xff08;LeetCode&#xff09; 与三数之和类似&#xff0c;重点在剪枝和去重的区别&#xff0c;由于target可正可负&#xff0c;因此需要分两种情况讨论&#xff0c;如果target为正&#xff0c;则若当前选择的元素之和大于target&#xff0c;需要跳出这…...

[SAP ABAP] 使用LOOP AT...ASSIGNING FIELD-SYMBOL 直接更新内表数据

使用 LOOP AT...ASSIGNING FIELD-SYMBOL... 可以直接修改内表中的数据&#xff0c;而不需要先将内表数据复制到相应的工作区&#xff0c;然后再更新回内表中&#xff0c;从而提高性能 针对上述代码进行优化&#xff0c;我们使用LOOP AT...ASSIGNING FIELD-SYMBOL 直接更新内表数…...

MySQL数据导出导入

一、数据导出 1.导出全库备份到本地的目录 mysqldump -u$USER -p$PASSWD -h127.0.0.1 -P3306 --routines--default-character-setutf8 --lock-all-tables --add-drop-database -A >db.all.sql 2.导出指定库到本地的目录(例如mysql库) mysqldump -u$USER -p$PASSWD -h127.…...

leetcode 127. 单词接龙

题目&#xff1a;127. 单词接龙 - 力扣&#xff08;LeetCode&#xff09; 先建立一颗trie树&#xff0c;从beginWord开始bfs&#xff1b;bfs的过程中&#xff0c;对trie树进行dfs寻找“只差一个字母”的其他未遍历到的字符串&#xff1b;直到bfs遍历到endWord。 struct Node …...

如何开发一个支持海量分布式锁的应用库

分布式锁是一种用于控制分布式系统中资源访问的同步机制&#xff0c;确保在任意时刻只有一个客户端能够获取到锁&#xff0c;并对共享资源进行操作。 作用 1.保证数据一致性&#xff1a;在多个节点并发执行的情况下&#xff0c;分布式锁可以防止同时修改同一份数据&#xff0c…...

JavaScript系列(17)--类型系统模拟

JavaScript类型系统模拟 &#x1f3ad; 今天&#xff0c;让我们深入探讨JavaScript中的类型系统模拟。虽然JavaScript是一门动态类型语言&#xff0c;但我们可以通过各种方式来实现类型检查和验证。 类型系统基础 &#x1f31f; &#x1f4a1; 小知识&#xff1a;JavaScript是…...

openssl编译

关于windows下&#xff0c;openssl编译 环境准备 安装 perl:https://djvniu.jb51.net/200906/tools/ActivePerl5_64.rar安装nasm&#xff1a;https://www.nasm.us/pub/nasm/releasebuilds/2.13.01/win64/nasm-2.13.01-installer-x64.exe下载opensll源码&#xff1a;https://o…...

校园网络综合布线系统设计与实践

校园网络综合布线系统设计与实践 摘要&#xff1a;随着信息时代的发展&#xff0c;网络综合布线显得更加重要。综合布线技术也日益引起人的重视。综合布线管理系统是一个实用性十分强的系统工程&#xff0c;同样又是现代社区信息化建设的基础与必要产品&#xff0c;是对多用途…...

如果商品信息更新,爬虫会失效吗?

当商品信息更新时&#xff0c;爬虫是否失效取决于更新的具体内容。以下是一些可能影响爬虫的因素&#xff1a; 可能导致爬虫失效的情况 HTML结构变化&#xff1a;如果 yiwugo 平台更新了商品详情页面的 HTML 结构&#xff0c;比如改变了元素的标签、类名或 ID&#xff0c;那么…...

【UE5 C++课程系列笔记】27——多线程基础——ControlFlow插件的基本使用

目录 步骤 一、搭建基本同步框架 二、添加委托 三、添加蓝图互动框架 四、修改为异步框架 完整代码 通过一个游戏初始化流程的示例来介绍“ControlFlows”的基本使用。 步骤 一、搭建基本同步框架 1. 勾选“ControlFlows”插件 2. 新建一个空白C类&#xff0c;这里…...

有收到腾讯委托律师事务所向AppStore投诉带有【水印相机】主标题名称App的开发者吗

近期&#xff0c;有多名开发者反馈&#xff0c;收到来自腾讯科技 (深圳) 有限公司委托北京的一家**诚律师事务所卞&#xff0c;写给AppStore的投诉邮件。 邮件内容主要说的是&#xff0c;腾讯注册了【水印相机】这四个字的商标&#xff0c;所以你们这些在AppStore上的app&…...

标定 3

标定场景与对应的方式 标定板标定主要应用场景: (1)无法获取到执行机构物理坐标值,比如相机固定,执行机构为传送带等 (2)相机存在畸变等非线性标定情况,需要进行畸变校正 (3)标定单像素精度 (4)获取两个相机之间的坐标系关系 标定板操作步骤: (1)确定好拍…...

用 C# 绘制谢尔宾斯基垫片

谢尔宾斯基垫片是一个三角形&#xff0c;分解成多个小三角形&#xff0c;如右图所示。有几种方法可以生成这种垫片。这里展示的方法是其中一种比较令人惊讶的方法。 程序从三个点开始&#xff08;图中圆圈所示&#xff09;。“当前位置”从其中一个点开始。为了生成后续点&…...

java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter

今天在朋友机子上运行代码&#xff0c;在生成token的时候&#xff0c;遇到了这样一个问题&#xff1a; Caused by: java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter at io.jsonwebtoken.impl.Base64Codec.decode(Base64Codec.java:26) ~[jjwt-0.9.1.jar:0.…...

双因素身份验证技术在NPI区域邮件安全管控上的解决思路

在制造业中&#xff0c;NPI&#xff08;New Product Introduction&#xff0c;新产品导入&#xff09;区域是指专门负责新产品从概念到市场推出全过程的部门或团队。NPI 的目标是确保新产品能够高效、高质量地投入生产&#xff0c;并顺利满足市场需求。在支撑企业持续创新和竞争…...

java后端对接飞书登陆

java后端对接飞书登陆 项目要求对接第三方登陆&#xff0c;飞书登陆&#xff0c;次笔记仅针对java后端&#xff0c;在看本笔记前&#xff0c;默认已在飞书开发方已建立了应用&#xff0c;并获取到了appid和appsecret。后端要做的其实很简单&#xff0c;基本都是前端做的&…...

记录一次Android Studio的下载、安装、配置

目录 一、下载和安装 Android Studio 1、搜索下载Android studio ​2、下载成功后点击安装包进行安装&#xff1a; 3、这里不用打勾&#xff0c;直接点击安装 &#xff1a; 4、完成安装&#xff1a; 5、这里点击Cancel就可以了 6、接下来 7、点击自定义安装&#xff1a…...

直流无刷电机控制(FOC):电流模式

目录 概述 1 系统框架结构 1.1 硬件模块介绍 1.2 硬件实物图 1.3 引脚接口定义 2 代码实现 2.1 软件架构 2.2 电流检测函数 3 电流环功能实现 3.1 代码实现 3.2 测试代码实现 4 测试 概述 本文主要介绍基于DengFOC的库函数&#xff0c;实现直流无刷电机控制&#x…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

生信服务器 | 做生信为什么推荐使用Linux服务器?

原文链接&#xff1a;生信服务器 | 做生信为什么推荐使用Linux服务器&#xff1f; 一、 做生信为什么推荐使用服务器&#xff1f; 大家好&#xff0c;我是小杜。在做生信分析的同学&#xff0c;或是将接触学习生信分析的同学&#xff0c;<font style"color:rgb(53, 1…...

从0开始学习R语言--Day17--Cox回归

Cox回归 在用医疗数据作分析时&#xff0c;最常见的是去预测某类病的患者的死亡率或预测他们的结局。但是我们得到的病人数据&#xff0c;往往会有很多的协变量&#xff0c;即使我们通过计算来减少指标对结果的影响&#xff0c;我们的数据中依然会有很多的协变量&#xff0c;且…...