CSS如何设置滚动条宽度
admin
2023-07-30 19:51:42
0次

css中可以使用::-webkit-scrollbar伪类选择器设置滚动条样式，在此伪类选择器中可以通过width属性设置滚动条宽度。

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

  • ::-webkit-scrollbar — 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
  • ::-webkit-scrollbar-track — 滚动条轨道.
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
/*滚动条样式*/
.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
        width:4px;/*高宽分别对应横竖滚动条的尺寸*/
        height:4px;
}
.cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgba(0,0,0,0.2);
}
.cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgba(0,0,0,0.1);
}
CSS 滚动条

上一篇：Python使用pathlib库遍历文件夹获取直接下级文件和所有下级文件

下一篇：ubuntu安装mysql的命令

相关内容

Adam Lynch的CS...
问题：Adam Lynch的CSS网格数据表存在的问题是什么？解决...
2024-05-24 00:28:03
ActiveSection...
在 CSS 中，Active Section ID（活动部分标识符...
2024-05-22 01:01:02
ActiveAdmin是否...
ActiveAdmin并没有标准的CSS类来修改链接为按钮，但可以...
2024-05-20 01:59:08
ActiveAdmin有标...
ActiveAdmin提供了许多内置的CSS类来修改链接为按钮。其...
2024-05-20 01:58:02
Actionmailer ...
要解决“Actionmailer 发送的电子邮件不能读取 CSS”...
2024-05-20 00:50:03
ActionControl...
这个错误通常是因为没有正确配置路由或者资源文件路径不正确导致的。下...
2024-05-20 00:31:02

热门资讯

Mobi、epub格式电子书如... 在wps里全局设置里有一个文件关联，打开，勾选电子书文件选项就可以了。
小程序支付时提示：appid和... [Q]小程序支付时提示：appid和mch_id不匹配 [A]小程序和微信支付没有进行关联，访问“小...
Apache Doris 2.... 亲爱的社区小伙伴们，我们很高兴地向大家宣布，Apache Doris 2.0.0 版本已于...
项目管理和工程管理的区别 项目管理 项目管理，顾名思义就是专注于开发和完成项目的管理，以实现目标并满足成功标准和项目要求。 工...
微信小程序使用slider实现... 众所周知哈，微信小程序里面的音频播放是没有进度条的，但最近有个项目呢，客户要求音频要有进度条控制，所...
Apache Doris 常见... 什么是 Apache Doris Apache Doris 是一款 MPP 架构的 OLAP 列式存...
Vmware简易安装ubunt... 大晚上的折腾死我了VMware安装ubuntu，用简易安装结果设置的用户名密码死活进不去再重装一次，...
‘WebDriver‘ obj... selenium库报错"‘WebDriver’ object has no attribute ‘f...
pycparser 是一个用... `pycparser` 是一个用 Python 编写的 C 语言解析器。它可以用来解析 C 代码并构...
WiFi中继器和WiFi扩展器... WiFi中继器以无线方式连接到 WiFi 网络并重新广播信号。它就像一个中继系统，连接到我们的 Wi...