CSS滚动条详解(::-webkit-scrollbar )

滚动条出现的事件
当设置定宽或者定高的元素添加overflow:scroll属性,会出现滚动条,但是原生样式的会比较丑影响美观。

<div class="content"><div class="contain"></div>
</div>
.content {width: 500px;height: 500px;background-color: black;overflow: scroll;}.contain {width: 600px;height: 200px;background-color: white;}

效果
在这里插入图片描述
如何美化滚动条
通过设置 ::-webkit-scrollbar 伪元素影响滚动条样式,注意它仅在基于 Blink 或 Webkit 的浏览器上可用

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头),允许通过点击微调小方块的位置.
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.(里面装有Thumb)
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

demo
在这里插入图片描述

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar {width: 8px;height: 8px;background-color: #f5f5f5;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgb(186, 183, 183);border-radius: 10px;background-color: #f5f5f5;}/*定义滑块 内阴影+圆角*/::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgb(186, 183, 183);background-color: rgb(190, 190, 190);}

参考文章

  1. https://blog.csdn.net/weixin_46828094/article/details/128183459
  2. https://blog.csdn.net/u012551928/article/details/109286853
  3. https://blog.csdn.net/m0_49714202/article/details/124166367?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-124166367-blog-109286853.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-124166367-blog-109286853.235%5Ev38%5Epc_relevant_sort_base2&utm_relevant_index=1

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

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

相关文章

字符串相似度算法

相似度算法 Jaccard Similarity Coefficient、JaroWinkler 、Cosine Similarity、Levenshtein 距离编辑算法案例。 Jaccard相似性系数衡量两个集合的相似程度&#xff0c;通过计算两个集合的交集大小除以并集大小得出。适用于处理文本、推荐系统、生物信息学等领域Cosine Simil…

CleanMyMac X版本4.14.2中文版新功能介绍

CleanMyMac X版本4.14.2中文版是一款专业的Mac清理工具&#xff0c;只需要一键智能清理&#xff0c;便能让Mac恢复原始的性能&#xff0c;是MAC系统非常好用的工具。CleanMyMac X自身拥有一个安全数据库&#xff0c;它是一个项目列表&#xff0c;拥有一定的规格&#xff0c;可以…

CPU访问一个虚拟地址的整体流程

一、虚拟地址转换成物理地址 涉及到的部件&#xff1a; MMU&#xff1a;虚拟地址—MMU—>物理地址。MMU会控制整个流程&#xff08;查快表、查慢表等等&#xff09;TLB快表&#xff1a;组号&#xff08;若为组相联TLB&#xff09;、TLB标记、有效位、页框号页表&#xff08…

数据结构与算法(C语言版)P6---队列

1、队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除操作的特殊线性表&#xff0c;队列具有__先进先出__FIFO&#xff08;First In First Out&#xff09; 入队列&#xff1a;进行插入操作的一端称为__队尾__。 出队列&#xff1a;…

正则表达式语法与应用案例

正则表达式语法 正则表达式&#xff08;Regular Expression&#xff0c;缩写为Regex或RegExp&#xff09;的语法主要包括以下几个方面&#xff1a; 单个字符匹配&#xff1a;可以使用普通字符、元字符、字符集和反义字符来匹配一个单个字符。重复匹配&#xff1a;使用量词元字…

Cpp/Qt-day040920Qt

目录 时钟 头文件&#xff1a;Widget.h: 源文件:Widget.c: 效果图&#xff1a; 思维导图 时钟 头文件&#xff1a;Widget.h: #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QPainter> #include <QTime>…

性能测试 —— 性能测试常见的测试指标 !

一、什么是性能测试 先看下百度百科对它的定义&#xff0c;性能测试是通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试。 我们可以认为性能测试是&#xff1a;通过在测试环境下对系统或构件的性能进行探测&#xff0c;用以验证在生产环…

Java爬虫教程:从入门到精通

引言&#xff1a; 在互联网时代&#xff0c;海量的数据被存储在各种网页中。而Java作为一门强大的编程语言&#xff0c;具备丰富的网络编程能力&#xff0c;可以帮助开发者高效地获取和处理网络数据。本教程将带您从入门到精通&#xff0c;学习如何使用Java编写爬虫程序&#…

安防视频/集中云存储平台EasyCVR(V3.3)部分通道显示离线该如何解决?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

it运维监控主要做什么

IT运维监控已成为企业经营的重要组成部分。为了保证全面高效的运行&#xff0c;提升企业的经营效率和服务水平&#xff0c;主要从事对企业的IT基础设施进行监控和管理。所以&#xff0c;IT运维监控的关键是什么&#xff1f; IT运维监控的主要任务是确保IT基础设施的正常使用。它…

Gitee使用用户名密码登录一直错误/IDEA连接gitee仓库密码错误

天坑,注册的时候名字带了大写,用户名自动给你变成小写 真正的用户名在个人主页里面看,是后面的字符,才是真正的用户名.排查了一个小时密码问题,真的坑

百度SEO优化不稳定的原因分析(提升网站排名的稳定性)

百度SEO优化不稳定介绍蘑菇号-www.mooogu.cn SEO不稳定是指网站在搜索引擎中的排名不稳定&#xff0c;随着时间的推移会发生变化。这种情况可能会出现在网站页面结构、内容质量、外链质量等方面存在缺陷或不合理之处。因此&#xff0c;优化SEO非常重要&#xff0c;可以提高网站…

Gateway网关

网关GateWay 官方文档&#xff1a;https://docs.spring.io/spring-cloud-gateway/docs/3.1.2/reference/html/#gateway-how-it-works 核心概念 路由: 网关的核心数据结构&#xff0c;定义了网关如何处理请求. 一条路由信息包含路由的唯一标识ID,目的地URI, 一组断言&#xf…

融云 CallPlus + X,通话场景一站式解决方案

融云近期上线的 CallPlus SDK&#xff0c;针对音视频呼叫场景单独设计后端服务 Call Server&#xff0c;信令延时低至 150ms&#xff0c;确保各端计时准确、一致&#xff1b;上线了音视频通话互转、灵活的多人通话、通话记录管理能力等功能。关注【融云全球互联网通信云】了解更…

regsvr32 initpki.dll找不到指定模块要怎么解决?教你快速修复initpki.dll文件

当你尝试在 Windows 操作系统中注册 DLL 文件时&#xff0c;可能会遇到错误消息&#xff1a;“regsvr32 initpki.dll找不到指定模块”。它通常是由于一个或多个 DLL 文件缺失或损坏所导致的。这是一个常见的错误&#xff0c;并且可以遇到在 Windows 7、Windows 8 和 Windows 10…

点餐小程序的制作流程详解

随着移动互联网的发展&#xff0c;越来越多的消费者开始使用手机进行点餐&#xff0c;这也促使了点餐小程序的兴起。如果您是一位商家&#xff0c;想要开发一个属于自己的点餐小程序&#xff0c;那么不妨尝试一下以下的DIY教程吧&#xff01; 首先&#xff0c;我们需要找一个专…

Android存储权限完美适配(Android11及以上适配)

一、Bug简述 一个很普通的需求&#xff0c;需要下载图片到本地&#xff0c;我的三个测试机&#xff08;荣耀Android10&#xff0c;红米 11 和小米Android 13都没有问题&#xff09;。 然后&#xff0c;主角登场了&#xff0c;测试的三星Android 13 死活拉不起存储权限弹窗。 …

2010年408计组真题步骤解析

12&#xff0e;下列选项中&#xff0c;能缩短程序执行时间的措施是 D Ⅰ&#xff0e;提高 CPU 时钟频率 Ⅱ&#xff0e;优化数据通路结构 Ⅲ&#xff0e;对程序进行编译优化 A&#xff0e;仅Ⅰ和Ⅱ B&#xff0e;仅Ⅰ和Ⅲ C&#xff0e;仅Ⅱ和Ⅲ D&#xff0e;Ⅰ、Ⅱ和Ⅲ 解析&…

【文件操作——详细讲解】

1. 为什么使用文件&#xff1f;&#x1f9d0; 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数…

H3C ER G2系列路由器敏感信息泄露漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一、产品介绍 H3C ER2200G2是H3C推出的新一代高性能企业级路由器&#…