设置滚动条样式

news2024/11/18 1:51:13

滚动条样式：

下面是代码：

<!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.coloradmin.cn/o/1242138.html

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

相关文章

查看sql语句执行计划并重建索引

查看sql语句执行计划并重建索引

晚上cpu报警显示当前cpu使用率达到90%以上&#xff0c;不到10%的空闲 先查询当前sql&#xff1a; #&#xff08;ORACLE&#xff09; SQL > set line 200 pages 1000 col event for a30 col program for a30 col username for a12 col sql_id for a15 col INST_ID for 9999 …
阅读更多...
深入解析Java 8中HashMap的底层原理

深入解析Java 8中HashMap的底层原理

引言 HashMap是Java中常用的集合类&#xff0c;用于存储键值对。其底层实现经过多次优化&#xff0c;包括哈希算法、数组扩容、链表转红黑树等。本文将深入研究HashMap的底层原理&#xff0c;并详细探讨如何解决哈希碰撞的技术。 1. 哈希算法 HashMap的核心是哈希算法&#…
阅读更多...
openGauss学习笔记-130 openGauss 数据库管理-参数设置-重设参数

openGauss学习笔记-130 openGauss 数据库管理-参数设置-重设参数

文章目录 openGauss学习笔记-130 openGauss 数据库管理-参数设置-重设参数130.1 背景信息130.2 GUC参数设置130.3 操作步骤130.4 示例 openGauss学习笔记-130 openGauss 数据库管理-参数设置-重设参数 130.1 背景信息 openGauss提供了多种修改GUC参数的方法&#xff0c;用户可…
阅读更多...
vue2.0+elementui集成file-loader之后图标失效问题

vue2.0+elementui集成file-loader之后图标失效问题

背景 跑vue2elementUI项目时&#xff0c;由于前端这边需要在本地存放xlsx模板文件&#xff0c;供用户下载模板文件&#xff0c;所以需要在webpack构建的时候增加file-loader进行解析xlsx文件打包。 vue版本2.x element-ui 版本 2.13.x 注意 npm i -D file-loader版本号给vue项…
阅读更多...
SpringMVC 基础知识

SpringMVC 基础知识

学习目标 掌握基于 SpringMVC 获取请求参数与响应 json 数据操作熟练应用基于 REST 风格的请求路径设置与参数传递能够根据实际业务建立前后端开发通信协议并进行实现基于 SSM 整合技术开发任意业务模块功能 1 SpringMVC 简介 1.1 概述 1.1.1 web程序开发流程 【执行过程】…
阅读更多...
ios(swiftui) 画中画

ios(swiftui) 画中画

一、环境 要实现画中画 ios系统必须是 iOS14 本文开发环境 xcode14.2 二、权限配置 在项目导航器中单击项目&#xff0c;然后单击Signing & Capabilities。单击 Capabilit搜索Background Modes&#xff0c;然后双击将其添加为功能。在新添加的Background Modes部分&a…
阅读更多...
vue2.6源码分析

vue2.6源码分析

vue相关文档 vue-cli官方文档 vuex官方文档 vue-router 官方文档 vue2.6源码地址 如何调试源码 package.json 添加了--sourcemap "scripts": {"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap" }新增…
阅读更多...
服务号可以迁移到订阅号吗

服务号可以迁移到订阅号吗

服务号和订阅号有什么区别&#xff1f;服务号转为订阅号有哪些作用&#xff1f;首先我们要看一下服务号和订阅号的主要区别。1、服务号推送的消息没有折叠&#xff0c;消息出现在聊天列表中&#xff0c;会像收到消息一样有提醒。而订阅号推送的消息是折叠的&#xff0c;“订阅号…
阅读更多...
盘点一下：为了考上本科，你需要放弃什么？

盘点一下：为了考上本科，你需要放弃什么？

专转本除了胜利后喜悦&#xff0c;更多的则是过程的艰辛&#xff0c;为了专转本成功&#xff0c;我们放弃了自己的娱乐时间、放弃了自己的兴趣爱好。 专转本考试相当于人生第二次“高考”&#xff0c;在学历门槛的今天&#xff0c;越来越多的人都在通过各类途径提转个人学历。…
阅读更多...
用好语言模型：temperature、top-p等核心参数解析

用好语言模型：temperature、top-p等核心参数解析

编者按&#xff1a;我们如何才能更好地控制大模型的输出? 本文将介绍几个关键参数&#xff0c;帮助读者更好地理解和运用 temperature、top-p、top-k、frequency penalty 和 presence penalty 等常见参数&#xff0c;以优化语言模型的生成效果。 文章详细解释了这些参数的作用…
阅读更多...
【KMP算法】学习总结

【KMP算法】学习总结

说明&#xff1a; 文章内容为对KMP算法的总结&#xff0c;以及力扣例题&#xff1b;文章内容为个人的学习总结&#xff0c;如有错误&#xff0c;欢迎指正。 文章目录 1. KMP算法1.1 算法步骤1.2 关于指针回退问题 2 . LeetCode例题 1. KMP算法 1.1 算法步骤 KMP算法通常用于…
阅读更多...
福州大学《嵌入式系统综合设计》实验五：图像裁剪及尺寸变换

福州大学《嵌入式系统综合设计》实验五：图像裁剪及尺寸变换

一、实验目的 在深度学习中&#xff0c;往往需要从一张大图中裁剪出一张张小图&#xff0c;以便适应网络输入图像的尺寸&#xff0c;这可以通过bmcv_image_crop函数实现。 实践中&#xff0c;经常需要对输入图像的尺寸进行调整&#xff0c;以适用于网络输入图片尺寸&#xff0…
阅读更多...
vue中v-if与v-for的优先级?

vue中v-if与v-for的优先级?

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue中v-if与v-for的优先级? 目录 v-if和v-for的优先级是什么&#xff1f; 一、作用 二、优先级…
阅读更多...
RocketMQ保姆级教程

RocketMQ保姆级教程

RocketMQ是阿里巴巴旗下一款开源的MQ框架&#xff0c;经历过双十一考验、Java编程语言实现&#xff0c;有非常好完整生态系统。RocketMQ作为一款纯java、分布式、队列模型的开源消息中间件&#xff0c;支持事务消息、顺序消息、批量消息、定时消息、消息回溯等&#xff0c;总之…
阅读更多...
AI绘画工具汇总：免费、简单易上手

AI绘画工具汇总：免费、简单易上手

欢迎来到魔法宝库&#xff0c;传递AIGC的前沿知识&#xff0c;做有格调的分享❗ 喜欢的话记得点个关注吧&#xff01; 提到AI绘画&#xff0c;许多人通常会想到Midjourney和Stable Diffusion等工具&#xff0c;然而&#xff0c;这些工具对于新手而言门槛较高&#xff0c;不太友…
阅读更多...
20230511 Windows Ubuntu vscode remote-ssh 连接配置

20230511 Windows Ubuntu vscode remote-ssh 连接配置

参考 &#xff1a; VSCode SSH 连接远程ubuntu Linux 主机 VSCode通过Remote SSH扩展连接到内网Ubuntu主机 Ubuntu 安装 sudo apt-get install openssh-server vscode: 安装remote-ssh 插件 连接到服务器IP 免密登录的公钥密钥传递用filezillaUbuntu 和 Windows 文件互传 …
阅读更多...
INFLOW：用于检测隐藏服务器的反向网络流水印

INFLOW：用于检测隐藏服务器的反向网络流水印

文章信息 论文题目&#xff1a;INFLOW: Inverse Network Flow Watermarking for Detecting Hidden Servers 期刊&#xff08;会议&#xff09;&#xff1a;IEEE INFOCOM 2018 - IEEE Conference on Computer Communications 级别&#xff1a;CCF A 文章链接&#xff1a;https:…
阅读更多...
分布式篇---第二篇

分布式篇---第二篇

系列文章目录 文章目录 系列文章目录前言一、你知道哪些分布式事务解决方案？二、什么是二阶段提交？三、什么是三阶段提交？前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你…
阅读更多...
AMEYA360：瑞萨面向高端工业传感器系统推出高精度模拟前端的32位RX MCU

AMEYA360：瑞萨面向高端工业传感器系统推出高精度模拟前端的32位RX MCU

全球半导体解决方案供应商瑞萨电子&#xff08;TSE&#xff1a;6723&#xff09;宣布面向高端工业传感器系统推出一款全新RX产品——RX23E-B&#xff0c;扩展32位微控制器&#xff08;MCU&#xff09;产品线。新产品作为广受欢迎的RX产品家族的一员&#xff0c;具有高精度模拟前…
阅读更多...
chatglm3部署使用

chatglm3部署使用

chatglm3部署使用 1.部署2.使用3.接入微信4.vue前端 1.部署 1.首先去github下载chatglm3代码。Huggingface下载模型一直失败&#xff0c;所以用阿里的魔塔社区下载。 git clone https://github.com/THUDM/ChatGLM3.git git clone https://www.modelscope.cn/ZhipuAI/chatglm3…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023