设置滚动条样式

滚动条样式：

下面是代码：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS3自定义滚动条</title><style>header {font-family: 'Lobster', cursive;text-align: center;font-size: 25px;}#info {font-size: 18px;color: #555;text-align: center;margin-bottom: 25px;}a {color: #074E8C;}.scrollbar {margin-left: 30px;float: left;height: 300px;width: 65px;background: #F5F5F5;overflow-y: scroll;margin-bottom: 25px;}.force-overflow {min-height: 450px;}#wrapper {text-align: center;width: 500px;margin: auto;}/**  STYLE 1*/#style-1::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}#style-1::-webkit-scrollbar {width: 8px;background-color: #F5F5F5;}#style-1::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: #555;}/**  STYLE 2*/#style-2::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}#style-2::-webkit-scrollbar {width: 12px;background-color: #F5F5F5;}#style-2::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: #D62929;}/**  STYLE 3*/#style-3::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-3::-webkit-scrollbar {width: 6px;background-color: #F5F5F5;}#style-3::-webkit-scrollbar-thumb {background-color: #000000;}/**  STYLE 4*/#style-4::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-4::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-4::-webkit-scrollbar-thumb {background-color: #000000;border: 2px solid #555555;}/**  STYLE 5*/#style-5::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-5::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-5::-webkit-scrollbar-thumb {background-color: #0ae;background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));}/**  STYLE 6*/#style-6::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-6::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-6::-webkit-scrollbar-thumb {background-color: #F90;background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)}/**  STYLE 7*/#style-7::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;border-radius: 10px;}#style-7::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-7::-webkit-scrollbar-thumb {border-radius: 10px;background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));}/**  STYLE 8*/#style-8::-webkit-scrollbar-track {border: 1px solid black;background-color: #F5F5F5;}#style-8::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-8::-webkit-scrollbar-thumb {background-color: #000000;}/**  STYLE 9*/#style-9::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-9::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-9::-webkit-scrollbar-thumb {background-color: #F90;background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)}/**  STYLE 10*/#style-10::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;border-radius: 10px;}#style-10::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-10::-webkit-scrollbar-thumb {background-color: #AAA;border-radius: 10px;background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent)}/**  STYLE 11*/#style-11::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;border-radius: 10px;}#style-11::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-11::-webkit-scrollbar-thumb {background-color: #3366FF;border-radius: 10px;background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent)}/**  STYLE 12*/#style-12::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);border-radius: 10px;background-color: #444444;}#style-12::-webkit-scrollbar {width: 12px;background-color: #F5F5F5;}#style-12::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #D62929;background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent)}/**  STYLE 13*/#style-13::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);border-radius: 10px;background-color: #CCCCCC;}#style-13::-webkit-scrollbar {width: 12px;background-color: #F5F5F5;}#style-13::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #D62929;background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent)}/**  STYLE 14*/#style-14::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);background-color: #CCCCCC;}#style-14::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-14::-webkit-scrollbar-thumb {background-color: #FFF;background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, transparent 100%, rgba(0, 0, 0, 1) 75%, transparent)}/**  STYLE 15*/#style-15::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);background-color: #F5F5F5;border-radius: 10px;}#style-15::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-15::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #FFF;background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6, #54DE5D))}/**  STYLE 16*/#style-16::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);background-color: #F5F5F5;border-radius: 10px;}#style-16::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-16::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #FFF;background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);}</style>
</head><body><div id="wrapper"><div class="scrollbar" id="style-default"><div class="force-overflow"></div></div><div class="scrollbar" id="style-1"><div class="force-overflow"></div></div><div class="scrollbar" id="style-2"><div class="force-overflow"></div></div><div class="scrollbar" id="style-3"><div class="force-overflow"></div></div><div class="scrollbar" id="style-4"><div class="force-overflow"></div></div><div class="scrollbar" id="style-5"><div class="force-overflow"></div></div><div class="scrollbar" id="style-6"><div class="force-overflow"></div></div><div class="scrollbar" id="style-7"><div class="force-overflow"></div></div><div class="scrollbar" id="style-8"><div class="force-overflow"></div></div><div class="scrollbar" id="style-9"><div class="force-overflow"></div></div><div class="scrollbar" id="style-10"><div class="force-overflow"></div></div><div class="scrollbar" id="style-11"><div class="force-overflow"></div></div><div class="scrollbar" id="style-13"><div class="force-overflow"></div></div><div class="scrollbar" id="style-14"><div class="force-overflow"></div></div><div class="scrollbar" id="style-15"><div class="force-overflow"></div></div></div>
</body></html>

滚动条到右边

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>#son {direction: ltr;}#father {width: 400px;height: 200px;border: 1px solid aqua;overflow-y: scroll;direction: rtl;}.item {height: 80px;border: 1px solid #eee;}</style><body><div id="father"><div id="son"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></div></body></html>

滚动条在上面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo-2</title><style>#son {width: 500px;transform: scaleY(-1);}#father {transform: scaleY(-1);width: 300px;overflow-x: scroll;}</style>
</head><body><div id="father"><div id="son">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div></body>
<script>
</script></html>

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

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

相关文章

亚马逊云科技向量数据库助力生成式AI成功落地实践探秘（二）

亚马逊云科技向量数据库助力生成式AI成功落地实践探秘（二）

向量数据库选择哪种近似搜索算法&#xff0c;选择合适的集群规模以及集群设置调优对于知识库的读写性能也十分关键&#xff0c;主要需要考虑以下几个方面&#xff1a; 向量数据库算法选择 在 OpenSearch 里&#xff0c;提供了两种 k-NN 的算法&#xff1a;HNSW (Hierarchical…
阅读更多...
技术分享 | 在 IDE 插件开发中接入 JCEF 框架

技术分享 | 在 IDE 插件开发中接入 JCEF 框架

项目背景 当前的开发环境存在多种不同语言的 IDE&#xff0c;如 JetBrains 全家桶、Eclipse、Android Studio 和 VS Code 等等。由于每个 IDE 各有其特定的语言和平台要求&#xff0c;因此开发 IDE 插件时&#xff0c;需要投入大量资源才能尽可能覆盖大部分工具。同时&#xf…
阅读更多...
数据结构算法-贪心算法

数据结构算法-贪心算法

引言 贪心&#xff1a;人只要有 “需求“ &#xff0c;都会有有点“贪“&#xff0c; 这种“贪“是一种选择&#xff0c;或者“”取舍“ RTS&#xff08;即时战略&#xff09;游戏&#xff1a; 帝国时代里 首先确保拥有足够的人口 足够的粮食&#xff0c;足够的战略资源 足够的…
阅读更多...
干货科普 | 不同类型的机器人及其在工作中的应用

干货科普 | 不同类型的机器人及其在工作中的应用

原创 | 文 BFT机器人 制造商在其操作中使用各种类型的机器人&#xff0c;每种机器人都具有特定的能力和功能。我们将讨论制造业中使用的一些最常见类型的机器人&#xff0c;以及哪种机器人可能最适合您的应用。 01 关节机器人 关节式机器人是一种工业机器人&#xff0c;具有一…
阅读更多...
关于easy-es的聚合问题

关于easy-es的聚合问题

es实体类&#xff1a; public class ChemicalES {IndexId(type IdType.CUSTOMIZE)private Long id;HighLightIndexField(fieldType FieldType.TEXT, analyzer "ik_max_word")private String name;IndexField(fieldType FieldType.KEYWORD)private List<Stri…
阅读更多...
“土味出海”，屡试不爽！短剧出海引来新一轮爆发？

“土味出海”，屡试不爽！短剧出海引来新一轮爆发？

土味和“钱途”并存的短剧不仅在国内迅猛爆发&#xff0c;今年下半年以来海外市场多部爆火短剧出现&#xff0c;“短剧出海”的话题热度不断攀升&#xff0c;丝毫不差2021年网文出海的盛况。 “霸总的爱&#xff0c;日入千万刀”&#xff0c;是真实存在的&#xff01; 据统计…
阅读更多...
tp8 使用rabbitMQ（1）简单队列

tp8 使用rabbitMQ（1）简单队列

php8.0 使用 rabbitmq 要使用 3.6版本以上的&#xff0c; 并且还要开启 php.ini中的 socket 扩展 php think make:command SimpleMQProduce //创建一个生产者命令行 php think make:command SimpleMQConsumer //创建一个消费者命令行 代码中的消息持久化的说明 RabbitMQ 消息持…
阅读更多...
某上市证券公司：管控文件交换行为 保护核心数据资产

某上市证券公司：管控文件交换行为 保护核心数据资产

客户简介 某上市证券公司成立于2001年&#xff0c;经营范围包括&#xff1a;证券经纪、证券投资咨询、证券承销与保荐、证券自营等。经过多年发展&#xff0c;在北京、上海、深圳、重庆、杭州、厦门等国内主要中心城市及甘肃省内各地市设立了15家分公司和80余家证券营业部。20…
阅读更多...
软文推广中如何提炼好产品卖点，媒介盒子分享

软文推广中如何提炼好产品卖点，媒介盒子分享

内容同质化的时代下&#xff0c;企业应该如何让用户留下印象&#xff0c;并且成功将产品卖出去&#xff0c;核心思维就在于提炼产品卖点&#xff0c;产品卖点是销量提升的关键&#xff0c;相信企业在推广产品时都会有点困惑&#xff0c;感觉自家产品和竞品比起来只是logo、外观…
阅读更多...
【攻防世界-misc】pure_color

【攻防世界-misc】pure_color

1.方法一&#xff1a;用画图工具打开图片&#xff0c;将图片拷贝至虚拟机win7桌面&#xff0c; 点“属性”&#xff0c;颜色设置为“黑白”&#xff0c; 出现flag值。 2.方法二&#xff1a;使用Stegsilve打开&#xff0c;分析图片 将图片打开&#xff0c;按左右键查找&#xff…
阅读更多...
c#数据库：vs2022 加入mysql数据源

c#数据库：vs2022 加入mysql数据源

网上有VS2019连接MySQL数据库的&#xff0c;那么VS2022&#xff0c;VS2023如果和连接到mysql数据库呢&#xff0c;这里总结一下我的经历&#xff1a; 1、首先下载ODBC驱动安装包 当前下载地址&#xff1a;https://dev.mysql.com/downloads/connector/odbc/ 2、ODBC安装 下载完…
阅读更多...
openGauss学习笔记-131 openGauss 数据库运维-启停openGauss

openGauss学习笔记-131 openGauss 数据库运维-启停openGauss

文章目录 openGauss学习笔记-131 openGauss 数据库运维-启停openGauss131.1 启动openGauss131.2 停止openGauss131.3 示例131.3.1 启动openGauss131.3.2 停止openGauss 131.4 错误排查 openGauss学习笔记-131 openGauss 数据库运维-启停openGauss 131.1 启动openGauss 以操作系…
阅读更多...
【ChatGLM3-6B】Docker下快速部署

【ChatGLM3-6B】Docker下快速部署

【ChatGLM2-6B】小白入门及Docker下部署 前提下载安装包网盘地址 开始安装加载镜像启动镜像进入容器启动模型交互页面访问页面地址 前提 安装好了docker安装好了NVIDIA显卡16G 下载安装包 网盘地址 ​ 这里因为网盘上传文件有大小限制&#xff0c;所以使用了分卷压缩的方式…
阅读更多...
【深度学习】CNN中pooling层的作用

【深度学习】CNN中pooling层的作用

1、pooling是在卷积网络&#xff08;CNN&#xff09;中一般在卷积层&#xff08;conv&#xff09;之后使用的特征提取层&#xff0c;使用pooling技术将卷积层后得到的小邻域内的特征点整合得到新的特征。一方面防止无用参数增加时间复杂度&#xff0c;一方面增加了特征的整合度…
阅读更多...
JVM中如何实现垃圾收集

JVM中如何实现垃圾收集

Java虚拟机&#xff08;JVM&#xff09;使用垃圾收集器&#xff08;Garbage Collector&#xff09;来管理内存&#xff0c;清理不再使用的对象以释放内存空间。垃圾收集的主要目标是自动化内存管理&#xff0c;使开发人员无需显式地释放不再使用的内存&#xff0c;从而降低了内…
阅读更多...
2016年8月18日 Go生态洞察：Go 1.7版本二进制文件缩小

2016年8月18日 Go生态洞察：Go 1.7版本二进制文件缩小

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
【经验分享】在vm中安装openEuler及使用yum安装openGauss

【经验分享】在vm中安装openEuler及使用yum安装openGauss

1.前言 随着互联网时代对数据库的新要求,以PostgreSQL为基础的开源数据库openGauss应运而生。openGauss在保持PostgreSQL接口兼容的前提下,对其查询优化器、高可用特性等进行了全面优化,实现了超高性能。 同时,openGauss作为社区项目,新增功能持续丰富。优点是查询性能高、可…
阅读更多...
【多线程】-- 01 线程创建之继承Thread多线程同步下载网络图片

【多线程】-- 01 线程创建之继承Thread多线程同步下载网络图片

多线程 1 简介 1.1 多任务、多线程 普通方法调用&#xff1a;只有主线程一条执行路径 多线程&#xff1a;多条执行路径&#xff0c;主线程和子线程并行交替执行 如下图所示&#xff1a; 1.2 程序.进程.线程 一个进程可以有多个线程&#xff0c;例如视频中同时听声音、看图…
阅读更多...
idea 问题合集

idea 问题合集

调试按钮失效&#xff1a; 依次点击&#xff1a;Modules-web-src-Sources&#xff0c;重启IDEA即可&#xff08;网上看到的方法&#xff0c;原因呢未明&#xff09;
阅读更多...
U-boot(四):start_armboot

U-boot(四):start_armboot

本文主要探讨210的uboot启动的第二阶段&#xff0c;主要函数为start_armboot。 uboot 一阶段初始化SoC内部部件(看门狗、时钟等),初始化DDR,重定位 二阶段初始化其余硬件(iNand、网卡芯片)以及命令、环境变量等 启动打印硬件信息,进入bootdelay,读秒完后执行bootc…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023