设置滚动条样式

滚动条样式：

下面是代码：

<!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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Word/PPT/PDF怎么免费转为JPG图片？

Word/PPT/PDF怎么免费转为JPG图片？

1、打开金鸣表格文字识别网站。 2、点击导航条上的“软件下载” 3、安装并打开金鸣表格文字识别软件。 4、点击顶部导航栏的“文件转图片”。 5、选择需要转换成图片的文件&#xff08;支持Word/PPT/PDF&#xff09;. 6、点“打开”程序将自动分页转换为图片。
阅读更多...
Linux（6）：文件与文件系统的压缩，打包与备份

Linux（6）：文件与文件系统的压缩，打包与备份

压缩文件的用途与技术 由于 1 byte 8 bits &#xff0c;所以每个byte当中会有8个空格&#xff0c;而每个空格可以是0,1。 其实文件里面有相当多的『空间』存在&#xff0c;并不是完全填满的&#xff0c;而『压缩』的技术就是将这些『空间』填满&#xff0c;以让整个文件占用…
阅读更多...
【Proteus仿真】【51单片机】智能垃圾桶设计

【Proteus仿真】【51单片机】智能垃圾桶设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用报警模块、LCD1602液晶模块、按键模块、人体红外传感器、HCSR04超声波、有害气体传感器、SG90舵机等。 主要功能&#xff1a; 系统运行后&#xf…
阅读更多...
Adobe的组织工具程序Bridge 2024 版本下载与安装

Adobe的组织工具程序Bridge 2024 版本下载与安装

目录 前言一、Bridge 2024安装二、使用配置总结 前言 Adobe Bridge是由 Adobe 公司开发的一款用于管理和组织创意资产的工具。它是Adobe Creative Cloud 套件的一部分&#xff0c;为设计师、摄影师和其他创意专业人员提供了一个集中管理和浏览其多媒体文件的平台。注&#xff…
阅读更多...
ES6 — ES14 新特性

ES6 — ES14 新特性

一、ES6 新特性&#xff08;2015&#xff09; 1. let和const 在ES6中&#xff0c;新增了let和const关键字&#xff0c;其中 let 主要用来声明变量&#xff0c;而 const 通常用来声明常量。let、const相对于var关键字有以下特点&#xff1a; 特性varletconst变量提升✔️全局…
阅读更多...
人工智能：让生活更便捷、更智能——探讨人工智能在生活中的作用与挑战

人工智能：让生活更便捷、更智能——探讨人工智能在生活中的作用与挑战

文章目录 前言人工智能的定义与分类人工智能的领域一、智能语音助手改变日常生活二、智能驾驶带来出行革命三、人工智能在医疗健康领域的应用四、教育领域的人工智能创新 人工智能的应用生活方面的影响工作方面的影响 应对AI带来的挑战后记 前言 人工智能相关的领域&#xff0…
阅读更多...
1、分布式锁实现原理与最佳实践（一）

1、分布式锁实现原理与最佳实践（一）

在单体的应用开发场景中涉及并发同步时&#xff0c;大家往往采用Synchronized&#xff08;同步&#xff09;或同一个JVM内Lock机制来解决多线程间的同步问题。而在分布式集群工作的开发场景中&#xff0c;就需要一种更加高级的锁机制来处理跨机器的进程之间的数据同步问题&…
阅读更多...
Comsol Multiphysics 6.2 for Mac建模仿真软件

Comsol Multiphysics 6.2 for Mac建模仿真软件

COMSOL Multiphysics是一款多物理场仿真软件&#xff0c;旨在帮助工程师、科学家和研究人员解决各种复杂的工程和科学问题。该软件使用有限元分析方法&#xff0c;可以模拟和分析多个物理场的相互作用&#xff0c;包括结构力学、热传导、电磁场、流体力学和化学反应等。 COMSOL…
阅读更多...
OpenStack云计算平台-认证服务

OpenStack云计算平台-认证服务

目录 一、认证服务概览 二、安装和配置 1、先决条件 2、安全并配置组件 3、 配置 Apache HTTP 服务器 4、完成安装 三、创建服务实体和API端点 1、先决条件 2、创建服务实体和API端点 四、创建域、项目、用户和角色 五、验证操作 六、创建 OpenStack 客户端环境脚本…
阅读更多...
文章解读与仿真程序复现思路——电网技术 EI\CSCD\北大核心《考虑5G基站储能可调度容量的有源配电网协同优化调度方法》

文章解读与仿真程序复现思路——电网技术 EI\CSCD\北大核心《考虑5G基站储能可调度容量的有源配电网协同优化调度方法》

这篇文章的标题涉及到以下关键概念&#xff1a; 5G基站&#xff1a; 提到了5G基站&#xff0c;这表明文章的焦点可能是与第五代移动通信技术相关的内容。5G技术对于提高通信速度、降低延迟以及支持大规模连接等方面有显著的改进&#xff0c;因此对于基站的电力需求和供应可能存…
阅读更多...
【范县城关镇社工站】“社工相伴，携爱同行”宣传活动

【范县城关镇社工站】“社工相伴，携爱同行”宣传活动

为向辖区居民宣传社工职能和服务&#xff0c;提高公众对社工的认知和认可&#xff0c;同时让更多的人了解社工服务的价值和意义。在范县民政局的支持下&#xff0c;城关镇民政所的指导下&#xff0c;2023年11月22日至23日&#xff0c;范县城关镇社工站于城关镇辖区开展了“社工…
阅读更多...
【Spring集成MyBatis】动态sql

【Spring集成MyBatis】动态sql

文章目录 1. 什么是动态sql2. 动态sql之<if>3. 动态sql之<where>4. 动态sql之<foreach>5. sql片段抽取 此篇的代码基于 【Spring集成MyBatis】MyBatis的Dao层实现&#xff08;基于配置&#xff0c;非注解开发&#xff09;续写 1. 什么是动态sql MyBatis映射…
阅读更多...
OSG编程指南＜十＞：OSG几何体的绘制

OSG编程指南＜十＞：OSG几何体的绘制

1、场景基本绘图类 在 OSG 中创建几何体的方法比较简单&#xff0c;通常有 3 种处理几何体的手段&#xff1a; 使用松散封装的OpenGL 绘图基元&#xff1b;使用 OSG 中的基本几何体&#xff1b;从文件中导入场景模型。 使用松散封装的OpenGL 绘图基元绘制几何体具有很强的灵活…
阅读更多...
Docker Swarm总结+service创建和部署、overlay网络以及Raft算法（2/3）

Docker Swarm总结+service创建和部署、overlay网络以及Raft算法（2/3）

博主介绍&#xff1a;Java领域优质创作者,博客之星城市赛道TOP20、专注于前端流行技术框架、Java后端技术领域、项目实战运维以及GIS地理信息领域。 &#x1f345;文末获取源码下载地址&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb;…
阅读更多...
在vscode中添加代码提示

在vscode中添加代码提示

添加配置 run->add_configuration 添加头文件路径 在c_cpp_properties.json中添加头文件路径 效果
阅读更多...
PS 计数工具 基础使用方式讲解

PS 计数工具 基础使用方式讲解

上文PS 注释工具 基础使用方法讲解 中 我们讲了注释工具 解析来 我们来看这个计数工具 这里 我们换一张图像 如果 我要你数清楚 这个图上有几个咖啡豆 你能数清楚吗&#xff1f; 哈哈 其实也不难 不是特别大 但是 例如很多 且无规则物品时 我们可能就会数乱 左上角属性的话 我…
阅读更多...
APP软件外包开发流程

APP软件外包开发流程

外包APP软件项目的开发流程可以分为以下几个主要阶段&#xff0c;在整个流程中&#xff0c;沟通和合作是至关重要的&#xff0c;确保开发团队和客户之间有良好的沟通渠道&#xff0c;及时解决问题&#xff0c;保证项目按时交付。北京木奇移动技术有限公司&#xff0c;专业的软件…
阅读更多...
时间敏感网络TSN的车载设计实践： 802.1Qbv协议

时间敏感网络TSN的车载设计实践： 802.1Qbv协议

▎概述 IEEE 802.1Qbv[1]是TSN系列协议中备受关注的技术之一&#xff0c;如图1所示&#xff0c;它定义了一种时间感知整形器&#xff08;Time Aware Shaper&#xff0c;TAS&#xff09;&#xff0c;支持Qbv协议的交换机可以按照配置好的门控列表来打开/关闭交换机出口队列&…
阅读更多...
前端编码技巧须知

前端编码技巧须知

前端开发中可能会使用到以下软件&#xff0c;它们各自具有不同的作用&#xff1a; 代码编辑器&#xff1a;例如Sublime Text、Atom、Visual Studio Code等&#xff0c;用于编写和编辑HTML、CSS和JavaScript等前端代码。网页浏览器&#xff1a;例如Chrome、Firefox、Safari等&a…
阅读更多...
“关爱零距离.情暖老人心”主题活动

“关爱零距离.情暖老人心”主题活动

为提高社区老年人的生活质量&#xff0c;促进邻里间的互动与友谊&#xff0c;以及弘扬尊老爱幼的社区精神&#xff0c;11月21日山东省潍坊市金阳公益服务中心、重庆市潼南区同悦社会工作服务中心在潼南区桂林街道东风社区共同在潼南区桂林街道东风社区举办了“关爱零距离.情暖老…
阅读更多...
最新文章

Copyright @ 2022~2023