【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; /* 滑块颜色 轨道颜色 */
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/892368.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机使用MQ及介绍

mq官网&#xff1a;https://www.rabbitmq.com 一、虚拟机与 MQ 的结合优势 隔离与安全&#xff1a;虚拟机为 MQ 的运行提供了一个独立的环境&#xff0c;与宿主机以及其他虚拟机相互隔离。这意味着即使 MQ 所在的虚拟机出现故障或遭受安全威胁&#xff0c;也不会直接影响到宿主…

【Python】Python之Selenium基础教程+实战demo:提升你的测试+测试数据构造的效率!

这里写目录标题 什么是Selenium&#xff1f;Selenium基础用法详解环境搭建编写第一个Selenium脚本解析脚本脚本执行结果常用的元素定位方法常用的WebDriver方法等待机制 Selenium高级技巧详解页面元素操作处理弹窗和警告框截图和日志记录多窗口和多标签页操作 一个实战的小demo…

单通道串口服务器(三格电子)

一、产品介绍 1.1 功能简介 SG-TCP232-110 是一款用来进行串口数据和网口数据转换的设备。解决普通 串口设备在 Internet 上的联网问题。 设备的串口部分提供一个 232 接口和一个 485 接口&#xff0c;两个接口内部连接&#xff0c;同 时只能使用一个口工作。 设 备 的网 口…

socket网络编程-TC/IP方式

网络编程 1.概念&#xff1a;两台设备之间通过网络数据传输。 2.网络通信&#xff1a;将数据通过网络从一台设备传输另外一台设备。 3.java.net包下提供了一系列的类和接口&#xff0c;提供程序员使用&#xff0c;完成网络通信。 TCP和UDP TCP协议&#xff1a; 1.使用TCP协…

Docker compose 使用 --force-recreate --no-recreate 控制重启容器时的行为【后续】

前情&#xff1a;上一篇实际是让AI工具帮我总结了一下讨论的内容&#xff0c;这里把讨论的过程贴出来&#xff0c;这个讨论是为解决实际问题 前文https://blog.csdn.net/wgdzg/article/details/145039446 问题说明&#xff1a; 我使用 docker compose 管理我的容器&#xff0…

SAP SD学习笔记27 - 贩卖契约(框架协议)2 - 基本契约 - 金额契约(价值合同)

上一章讲了贩卖契约&#xff08;框架协议&#xff09;的概要&#xff0c;以及贩卖契约中最为常用的 基本契约 - 数量契约。 SAP SD学习笔记26 - 贩卖契约(框架协议)的概要&#xff0c;基本契约 - 数量契约-CSDN博客 本章继续讲SAP中的内容&#xff1a; - 基本契约 - 金额契约…

【面试题】技术场景 7、定位系统瓶颈

系统瓶颈定位方法总述 面试官询问如何快速定位系统瓶颈&#xff0c;旨在考察线上调试经验。主要方法包括&#xff1a; 压测&#xff1a;在项目上线前找出系统瓶颈并修复。监控工具或链路追踪工具&#xff1a;项目上线后用于实时监控或评测找瓶颈。Arthas&#xff08;原阿尔萨…

在Jmeter中跨线程组传递变量(token)--设置全局变量

参考资料&#xff1a; Jmeter跨线程组传递参数(token)_jmeter获取token传递给下一个线程组详解-CSDN博客 最近工作中遇到一个问题&#xff0c;就是如何跨线程组传递变量&#xff0c;比如token,后来找到一些资料解决了该问题&#xff0c;目前有两种方式都可以解决&#xff0c;我…

QT 常用控件的常用方法

QRadioButton、QCheckBox 常用函数&#xff1a; text(): 用于获取单选按钮的文本标签。 setText(const QString &text): 用于设置单选按钮的文本标签。 isChecked(): 用于检查单选按钮是否被选中。 setChecked(bool checked): 用于设置单选按钮是否被选中。 setIcon(c…

Element-UI:如何实现表格组件el-table多选场景下根据数据对某一行进行禁止被选中?

如何实现表格组件el-table多选场景下根据数据对某一行进行禁止被选中&#xff1f; 在使用 Element UI 的 Table 组件时&#xff0c;如果你想要禁用某一行的选中&#xff08;特别是在多选模式下&#xff09;&#xff0c;可以通过自定义行的 selectable 属性来实现。selectable …

rhcsa练习(3)

1 、创建文件命令练习&#xff1a; &#xff08; 1 &#xff09; 在 / 目录下创建一个临时目录 test &#xff1b; mkdir /test &#xff08; 2 &#xff09;在临时目录 test 下创建五个文件&#xff0c;文件名分别为 passwd &#xff0c; group &#xff0c; bashrc &#x…

uc/os-II 原理及应用(八) 系统裁减以及移植到51单片机上

两个习题 先了解下CPU上函数调用的过程: 一个程序取得函数地址&#xff0c;先保护现场将局部变量及参数压栈&#xff0c;再将调用函数的参数压栈&#xff0c;然后跳转到函数位置&#xff0c;将参数出栈&#xff0c;执行代码&#xff0c;结束后返回到调用位置&#xff0c;再怖复…

高等数学学习笔记 ☞ 洛必达法则与泰勒公式

1. 洛必达法则 1. 型与型未定式&#xff08;洛必达法则&#xff09; &#xff08;1&#xff09;型&#xff1a;若函数同时满足以下条件&#xff1a; &#xff08;2&#xff09;型&#xff1a;若函数同时满足以下条件&#xff1a; ①&#xff1a;当时&…

什么样的人适合从事FPGA开发的工作?

FPGA开发不仅要求扎实的技术基础&#xff0c;还非常看重团队合作、自信、沟通技巧以及细致入微的工作态度。从业者需具备面对复杂项目的自信&#xff0c;优秀的沟通能力以确保团队协作顺畅&#xff0c;严谨细心以应对精密的硬件设计&#xff0c;以及强烈的责任心来驱动每一个开…

【LeetCode】力扣刷题热题100道(26-30题)附源码 轮转数组 乘积 矩阵 螺旋矩阵 旋转图像(C++)

目录 1.轮转数组 2.除自身以外数组的乘积 3.矩阵置零 4.螺旋矩阵 5.旋转图像 1.轮转数组 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 class Solution { public:void rotate(vector<int>& nums, int k) …

JAVA 使用apache poi实现EXCEL文件的输出;apache poi实现标题行的第一个字符为红色;EXCEL设置某几个字符为别的颜色

设置输出文件的列宽&#xff0c;防止文件过于丑陋 Sheet sheet workbook.createSheet(FileConstants.ERROR_FILE_SHEET_NAME); sheet.setColumnWidth(0, 40 * 256); sheet.setColumnWidth(1, 20 * 256); sheet.setColumnWidth(2, 20 * 256); sheet.setColumnWidth(3, 20 * 25…

卷积神经网络CNN——卷积层、池化层、全连接层

参考这篇文章,讲的很详细: 卷积神经网络CNN——卷积层、池化层、全连接层_卷积层,池化层,全连接层-CSDN博客 原文链接:https://blog.csdn.net/qq_59702185/article/details/143744365 学习目标 了解卷积神经网络的构成 知道卷积的原理以及计算公式 了解池化的作用以及计算…

怎么抓取ios 移动app的https请求?

怎么抓取IOS应用程序里面的https&#xff1f; 这个涉及到2个问题 1.电脑怎么抓到IOS手机流量&#xff1f; 2.HTTPS怎么解密&#xff1f; 部分app可以使用代理抓包的方式&#xff0c;但是正式点的app用代理抓包是抓不到的&#xff0c;例如pin检测&#xff0c;证书双向校验等…

身份鉴权(PHP)(小迪网络安全笔记~

免责声明&#xff1a;本文章仅用于交流学习&#xff0c;因文章内容而产生的任何违法&未授权行为&#xff0c;与文章作者无关&#xff01;&#xff01;&#xff01; 附&#xff1a;完整笔记目录~ ps&#xff1a;本人小白&#xff0c;笔记均在个人理解基础上整理&#xff0c;…

自定义音频播放样式结合Howler.js

滑动式滚动条 不使用audio默认样式 自定义音频播放样式 当前时间 开始时间 结束时间 可播放可暂停 滚动条可拖动进行同步 具体样式可调整npm install howler --save<template><div class"audio-player"><div v-if"isLoading" class"l…