CSS修改滚动条样式

最新推荐文章于 2024-07-17 13:35:49 发布

莫尔道嘎老范

最新推荐文章于 2024-07-17 13:35:49 发布

阅读量140

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44134588/article/details/115642385

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS为网页滚动条添加自定义样式，包括设置滚动条小方块的颜色、边框半径，以及滚动条轨道的透明度。特别强调在Less中，这些样式必须与受影响的类名同级才能生效，提供了一个简洁的示例来展示实现效果。

摘要由CSDN通过智能技术生成

   div::-webkit-scrollbar-thumb {
          background: #00ecff !important;
          border-radius: 0.625rem;
        }
  
   div::-webkit-scrollbar-track {
          background: transparent;
      }

div::-webkit-scrollbar-thumb :滚动条里面的小方块
div::-webkit-scrollbar-track :滚动条轨道

注意:添加的css位置
在这里插入图片描述
我是用的less 这里需要与添加了滚动条的类名同级才能成功;
效果:

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

莫尔道嘎老范

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

修改滚动条的样式

weixin_34319817的博客

01-02

359

1.滚动条设置为透明（less语法） .scrollbar() { &::-webkit-scrollbar { width: 0.16rem; background-color: transparent; } &::-webkit-scrollbar-track { background-color: transp...

在 less 中可以通过以下方法隐藏滚动条:

T3165919332的博客

06-13

322

这会使用一个伪元素 ::before 撑开元素高宽,达到隐藏滚动条的效果。

参与评论您还未登录，请先登录后发表或查看评论

修改默认滚动条样式

天空影

11-29

4185

修改全局默认滚动条 /*滚动条凹槽的颜色，还可以设置边框属性 */ ::-webkit-scrollbar-track-piece { background-color:#f8f8f8; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } /*滚动条的宽度*/ ::-webkit-scrollbar ...

less 翻页查看文件内容

梦想起飞的地方.........

12-10

2183

less /usr/local/tomcat6/logs/catalina.out 翻页查看文件内容 less /usr/local/tomcat6/logs/catalina.out 显示行号 less -N /usr/apache-tomcat-6.0.32/logs/catalina.out less -N /usr/apache-tomcat-7.0.57/conf/se

vue less CSS滚动条样式修改美化变细

黄钟飞的博客

02-15

2278

vue less CSS滚动条样式修改美化变细

使用css修改滚动条样式

weixin_55541470的博客

07-17

259

【代码】使用css修改滚动条样式。

css 修改滚动条样式

qq_42759085的博客

01-23

775

css 修改滚动条样式

css修改滚动条样式

最是人间留不住，朱颜辞镜花辞树。

11-25

1299

【代码】修改滚动条样式。

纯CSS修改滚动条样式

weixin_45606890的博客

05-13

2249

纯CSS修改滚动条样式

vue、css修改滚动条样式

李程程的博客

05-31

868

vue、css修改滚动条样式样式为 /* 滚动条 */ body *::-webkit-scrollbar { width: 10px; height: 10px; } body *::-webkit-scrollbar-track { background: #fff; border-radius: 2px; } body *::-webkit-scrollbar-thumb { background: rgb(205, 206, 206); border-radius: 10px; }

CSS3改变浏览器滚动条样式

09-22

CSS3为我们提供了一种改变浏览器默认滚动条样式的方法。在某些情况下，浏览器的默认滚动条样式可能会显得太宽或太丑陋，这会影响网页的美观度和用户的体验。虽然改变滚动条的外观对于网站的基本功能来说并不是必要的...

使用css改变滚动条样式并使滚动条不贴边

diaolun1993的博客

04-23

1220

客户说mac下的滚动条很好看，他想让网站的滚动条在windows下也跟mac一样。好吧，还好可以修改滚动条的样式（还好网站只针对谷歌浏览器），结果发现修改了滚动条的样式之后滚动条紧贴着body。客户表示不满意并说 mac的滚动条是有间隙的。好吧我再试试，结果发现在滚动条的伪类中比如padding，margin之类的并不生效。为了节省时间直接去网上搜了一圈发现都是讲怎么修改样式的，...

python摄影交流平台代码

最新发布

09-26

python摄影交流平台代码python摄影交流平台代码python摄影交流平台代码python摄影交流平台代码python摄影交流平台代码python摄影交流平台代码python摄影交流平台代码

线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统

09-26

Java-ssm-jsp基于微信小程序的校园二手物品交易系统实现源码(源代码+说明文档)

09-26

首页：首页可以看到所有类别的二手物品。全部：可以看到不同类别，比如电子产品、服装等商品信息发布：可以发布自己的二手物品我的：个人中心中主要是针对自己的信息资料进行查询管理，主要内容那肯定就会有对于个人资料的修改操作还有我们管理人员经常把修改密码和我的收藏放在一起的功能操作了。项目关键技术开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog

基于 C++ 实现（控制台）图书馆管理系统

09-26

第 1.1 节软件编写目的目的:为实现图书管理的信息化、简单化，增加图书管理的功能，减轻图书管理员的劳动负担，及时、准确地反馈图书信息。此软件具备完整显示书籍清单、借还书操作简便、准确反馈书籍信息等功能，适用于闭环管理的图书馆，应用于学生、教师等在闭环管理范围之内的人群。第 1.2 节项目背景北京化工大学小学期 C 语言程序实训:图书馆管理系统第 1.3 节定义项目符合标准C 语言的代码定义第 1.4 节参考资料 a.选题来源:北京化工大学小学期 C 语言程序设计实训:图书管理系统 b.项目遵循的许可 Apache License 2.0 第 1.5 节软件功能说明软件结构分为 sign()，menu(),ist0,borrow0),ret0),update0,menu ykO,lis yk0. 其功能分别为:sign0读取文件中的账号密码验证登录，识别用户权限登录，游客模式进入; menu0显示功能，输入之后进入对应菜单，异常处理， list0)把书的列表从文件中读出并 print 在屏幕上; borrow()查找图书，全局模糊查询(书名，作者，出版社

CPH6405-VB一种N-Channel沟道SOT23-6封装MOS管

09-26

30V;6A;RDS(ON)=30mΩ@VGS=10V;VGS=20V;Vth=1.2V

售后服务及客户培训方案.docx

09-26

售后服务及客户培训方案.docx