滚动条如何设置样式和滚动条悬浮显示与隐藏

news/2024/5/19 22:57:21/

文章目录

  • 一、滚动条如何设置样式
    • 1:滚动条的默认样式(如下图)
      • 1:html代码
      • 2:css代码
      • 3:效果图
    • 2:CSS设置滚动条的属性(重点)
    • 3:设置滚动条的例子
      • 1:css代码(在第1步的基础上加上这段代码)
      • 2:效果图
      • 3:使用的注意事项
  • 二、滚动条悬浮隐藏和显示
    • 0.核心语法
    • 方式1.设置滚动条宽度为0px,hove为4px
      • (1)css代码(html代码就是最上面的哪个,没有变)
      • (2)css代码图片说明
      • (3)列表hover 的效果图
    • 方式2.设置滚动条滑块和轨道为透明色,hover为你需要的颜色
      • (1)css代码(html代码就是最上面的哪个,没有变)
      • (2)css代码图片说明
      • (3)列表hover 的效果图
  • 总结
    • 总结一:滚动条如何设置样式
    • 总结二


一、滚动条如何设置样式

1:滚动条的默认样式(如下图)

1:html代码

// html 代码
<div class="app"><div class="box"><p>111111</p><p>222222</p><p>333333</p><p>444444</p><p>555555</p><p>666666</p><p>777777</p><p>888888</p><p>999999</p><p>111111</p><p>222222</p><p>333333</p><p>444444</p><p>555555</p><p>666666</p><p>777777</p><p>888888</p><p>999999</p><p>111111</p><p>222222</p><p>333333</p><p>444444</p><p>555555</p><p>666666</p><p>777777</p><p>888888</p><p>999999</p><p>111111</p><p>222222</p><p>333333</p><p>444444</p><p>555555</p><p>666666</p><p>777777</p><p>888888</p><p>999999</p></div>
</div>

2:css代码

/* css 代码 */
.app{width: 300px;height: 500px;background-color: skyblue;overflow: scroll;
}
.box{width: 500px;height: 1000px;background-color: pink;
}

3:效果图

在这里插入图片描述

2:CSS设置滚动条的属性(重点)

主要有下面7个属性(真正常用的就是前三个

1、::-webkit-scrollbar 滚动条整体部分,设置宽度
2、::-webkit-scrollbar-thumb 滚动滑块
3、::-webkit-scrollbar-track 滚动条轨道
4、::-webkit-scrollbar-button 滚动条两端的按钮
5、::-webkit-scrollbar-track-piece 内层滚动槽
6、::-webkit-scrollbar-corner 边角
7、::-webkit-resizer 定义右下角拖动块的样式

3:设置滚动条的例子

1:css代码(在第1步的基础上加上这段代码)

/* 滚动条样式 */
.app::-webkit-scrollbar {width: 4px; /*  设置纵轴(y轴)轴滚动条 */height: 4px; /*  设置横轴(x轴)轴滚动条 */}/* 滚动条滑块(里面小方块) */.app::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.9);}/* 滚动条轨道 */.app::-webkit-scrollbar-track {border-radius: 0;box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: red;}

2:效果图

在这里插入图片描述

3:使用的注意事项

(1)你要修改的滚动条应该是父元素的,而不是超出滚动的盒子。
(2)滚动条轨道和滑块的颜色建议分别使用rgba(0,0,0, 0.1)和rgba(0,0,0, 0.2) 较为常用。(如下图,上面是为了更好的区别滑块和轨道的颜色才设置的red)
在这里插入图片描述

二、滚动条悬浮隐藏和显示

实战场景:我的电脑是widnow用的chrome浏览器,然后写项目的时候我和后端滚动条会在停止滚动后自动隐藏,然后设计那边mac的chrome的滚动条会一直显示。就有了一个新的需求:默认隐藏滚动条,hover的时候在结果列表区域显示滚动条。话不多说,看下面效果。

0.核心语法

答应我:不要写 类名:hover ::-webkit-scrollbar-thumb类名::-webkit-scrollbar-thumb :hover 类名::-webkit-scrollbar-thumb:hover 这种了样式了, 伪元素和伪类选择器之前不加空格 ,不加空格,不加空格(重要的事说三遍,别写错了不要怀疑你自己)。
例子:.app:hover::-webkit-scrollbar-thumb {/* … */}

/* 正确语法*/
.类名:hover::-webkit-scrollbar-thumb {/* ... */}

方式1.设置滚动条宽度为0px,hove为4px

(1)css代码(html代码就是最上面的哪个,没有变)

.app{width: 300px;height: 500px;overflow: scroll;
}
.box{width: 500px;height: 1000px;background-color: pink;
}
/* 滚动条样式 */
.app::-webkit-scrollbar {width: 0px; /*  设置纵轴(y轴)轴滚动条 */height: 0px; /*  设置横轴(x轴)轴滚动条 */
}
/* 滚动条滑块(里面小方块) */
.app::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);
}
/* 滚动条轨道 */
.app::-webkit-scrollbar-track {border-radius: 0;box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.1);
}/* hover时显色 */
.app:hover::-webkit-scrollbar {width: 4px;height: 4px;
}

(2)css代码图片说明

在这里插入图片描述

(3)列表hover 的效果图

在这里插入图片描述

方式2.设置滚动条滑块和轨道为透明色,hover为你需要的颜色

(1)css代码(html代码就是最上面的哪个,没有变)

.app{width: 300px;height: 500px;overflow: scroll;
}
.box{width: 500px;height: 1000px;background-color: pink;
}
/* 滚动条样式 */
.app::-webkit-scrollbar {width: 4px; /*  设置纵轴(y轴)轴滚动条 */height: 4px; /*  设置横轴(x轴)轴滚动条 */
}
/* 滚动条滑块(里面小方块) */
.app::-webkit-scrollbar-thumb {border-radius: 0px;background: transparent;
}
/* 滚动条轨道 */
.app::-webkit-scrollbar-track {border-radius: 0;background: transparent;
}/* hover时显色 */
.app:hover::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.2);
}
.app:hover::-webkit-scrollbar-track {background: rgba(0,0,0,0.1);
}

(2)css代码图片说明

在这里插入图片描述

(3)列表hover 的效果图

在这里插入图片描述


总结

提示:这里对文章进行总结:

总结一:滚动条如何设置样式

CSS设置滚动条的常用属性
1、::-webkit-scrollbar 滚动条整体部分,设置宽度
2、::-webkit-scrollbar-thumb 滚动滑块
3、::-webkit-scrollbar-track 滚动条轨道

总结二

伪元素和伪类选择器之前不加空格,类名hover的情况下修改滚动条样式的语法为 类名:hover::-webkit-scrollbar-thumb {/* ... */}


http://www.ppmy.cn/news/46808.html

相关文章

【Unity+MySQL】实现注册登录系统(升级版)

目录 1 UI界面重新设计1.1 注册界面1.2 登录界面1.3 交互实现 2 注册功能完善2.1 判断用户输入的用户名是否与数据库中的重复2.2 将当前时间更新至用户表的当前注册时间列2.3 将用户输入的注册密码使用哈希加密 3 登录功能完善4 总体功能流程图 接着 上篇文章所谈到的系统缺陷…

如何招生?一文教你高职院校有效的招生技巧

生源&#xff0c;是每一所高校的生存之本和生命线。 近几年招生宣传工作作为高职院校招生工作中的重要环节之一&#xff0c;具有政策性强&#xff0c;涉及面广&#xff0c;工作量大等特点&#xff0c;直接关系到学校可持续发展问题。 随着新媒体时代的发展&#xff0c;高职院…

深度学习中的卷积神经网络

博主简介 博主是一名大二学生&#xff0c;主攻人工智能研究。感谢让我们在CSDN相遇&#xff0c;博主致力于在这里分享关于人工智能&#xff0c;c&#xff0c;Python&#xff0c;爬虫等方面知识的分享。 如果有需要的小伙伴可以关注博主&#xff0c;博主会继续更新的&#xff0c…

Mysql安装详细教程

数据库相关概念 而目前主流的关系型数据库管理系统的市场占有率排名如下&#xff1a; Oracle&#xff1a;大型的收费数据库&#xff0c;Oracle公司产品&#xff0c;价格昂贵。 MySQL&#xff1a;开源免费的中小型数据库&#xff0c;后来Sun公司收购了MySQL&#xff0c;而Oracle…

Netty Jemalloc4算法-核心数据结构图示

Netty 从4.1.52版本开始&#xff0c;其内存分配算法&#xff0c;从jemalloc3 切换到了 jemalloc4。本文给出该算法涉及的核心数据结构图示&#xff1a; 想要看懂上图, 要点如下&#xff1a; 1. 小于等于16777216字节的空间&#xff0c;从chunk(一个16M的字节数组)中分配&#…

Python第三方库安装

看见更大的Python世界 Python社区PyPI The Python Package Index PyPI: Python Package Index PSF维护的展示全球Python计算生态的主站 学会检索并利用PyPI&#xff0c;找到合适的第三方库开发程序 实例&#xff1a;开发与区块链相关的程序 第1步&#xff1a;在pypi.org…

【电动汽车充电站有序充电调度的分散式优化】基于蒙特卡诺和拉格朗日的电动汽车优化调度(分时电价调度)(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

原创文章生成器在线版-ai写作生成器

随着人工智能技术的迅猛发展&#xff0c;越来越多的人开始意识到&#xff0c;利用AI可以实现许多以前不可能想象的事情。其中&#xff0c;一种最能体现人工智能技术优势的应用就是“ai原创文章生成器”。它可以为营销从业者提供一种全新的营销推广方式。 那么&#xff0c;什么是…

CAD 二次开发-Handle

在 CAD 二次开发中&#xff0c;Handle 是每个 CAD 实体的唯一标识符&#xff0c;类似于一个 ID。它是一个 long 类型的整数&#xff0c;可以用于标识和引用 CAD 实体&#xff0c;如图形对象、块、图层、实体等。 使用 Handle 可以方便地操作 CAD 实体&#xff0c;例如&#xf…

Java8 判空新写法(Optional方式)

1 引言 在文章的开头&#xff0c;先说下NPE问题&#xff0c;NPE问题就是&#xff0c;我们在开发中经常碰到的NullPointerException.假设我们有两个类&#xff0c;他们的UML类图如下图所示 在这种情况下&#xff0c;有如下代码 user.getAddress().getProvince();这种写法&…

Lumen6 /laravel 框架路由请求实现token验证

版本 Lumen6.0 中文文档&#xff1a;https://learnku.com/docs/lumen/5.7/cache/2411 实现功能效果 1、使用缓存存储用户token 2、从请求头head 中获取用户token 3、返回指定的认证失败结构体 4、对指定的接口路由做身份验证 第一步&#xff1a;解除注释 注意&#xff1…

Java的7大好处

Java 的 7 大优势 当 Sun Microsystems 在 1995 年发布 Java 语言环境白皮书时&#xff0c;他们列出了 Java 将给软件开发领域带来的以下 7 大好处&#xff1a; Java 简单而熟悉。Java是面向对象的。Java 是体系结构中立的。Java 健壮且安全。Java是多线程的。Java具有高性能。…

哈希表题目:在系统中查找重复文件

文章目录 题目标题和出处难度题目描述要求示例数据范围进阶 解法思路和算法代码复杂度分析 进阶问题答案后记 题目 标题和出处 标题&#xff1a;在系统中查找重复文件 出处&#xff1a;609. 在系统中查找重复文件 难度 6 级 题目描述 要求 给定一个目录信息列表 paths…

入门神经网络——浅层神经网络

文章目录 一、基础知识1.浅层神经网络介绍2.浅层神经网络的正向传播3.反向传播 二、浅层神经网络代码实例 一、基础知识 1.浅层神经网络介绍 此次构件浅层神经网络&#xff0c;相比于单神经元&#xff0c;浅层神经网络拥有多个神经元&#xff0c;因此又可以称为多神经元网络&…

Ubuntu 自带截图工具快捷键盘

PrtSc – 获取整个屏幕的截图并保存到 Pictures 目录。 Shift PrtSc – 获取屏幕的某个区域截图并保存到 Pictures 目录。 Alt PrtSc –获取当前窗口的截图并保存到 Pictures 目录。 Ctrl PrtSc – 获取整个屏幕的截图并存放到剪贴板。 Shift Ctrl PrtSc – 获取屏幕的某个…

【消费战略】解读100个食品品牌丨王小卤 4年10亿爆品破局

爆品破局 王小卤的聚焦发展! 王小卤创建于 2016 年&#xff0c;与饮料行业的独角兽元气森林同年。 相较于元气森林的快速增长&#xff0c;王小卤历经 三年坎坷之路&#xff0c;直至 2019 年才踏上高增长的赛道&#xff0c;实现四年十亿的增长。 “所有的消费品都值得重新 做…

SSM框架MyBatis 三种分页查询 PageHlper的使用以及五个参数的简单解释

SSM框架MyBatis 三种简单的分页查询 1. 基础分页查询&#xff08;环境在第一天的配置中有&#xff09; mapper也就是dao //查询总数Select("select count(*) from book;")int selectCount();//分页查询Select("select * from book limit #{currpage},#{size}&q…

KD2684S电机匝间耐电压测试仪

一、产品简介 试验仪适用于电机、变压器、电器线圈等这些由漆包线绕制的产品。因漆包线的绝缘涂敷层本身存在着质量问题&#xff0c;以及在绕线、嵌线、刮线、接头端部整形、绝缘浸漆、装配等工序工艺中不慎而引起绝缘层的损伤等&#xff0c;都会造成线圈层间或匝间绝缘层的绝缘…

NIFI从MySql中离线读取数据再导入到MySql中_03_来吧用NIFI实现_数据分页获取功能---大数据之Nifi工作笔记0038

之前使用querydatabasetable处理器来获取mysql中的数据,我们只能写死一个sql的查询语句,但是 实际引用环境中,我们的一张mysql的表,可能有上千万的数据,那么,不可能,我们把sql查询语句写死,这样一次性如果获取所有数据,那么压力太大了,我们怎么弄呢?找了很久没有找到相关教程…

Java 8 中使用 Lambda 表达式和 Stream API 解决 LeetCode 的两数之和问题

Java 8 中使用 Lambda 表达式和 Stream API 解决 LeetCode 的两数之和问题 当我们在面对一个数列&#xff0c;需要查找其中两个元素的和为给定目标值时&#xff0c;可以使用两数之和&#xff08;Two Sum&#xff09;问题来解决。这个问题在 LeetCode 上有很高的重要性和普遍性&…