自定义滚动条样式纯(css)
啥都不说先看图:
注: 只适合chrom,不适用IE和fireFox
下面展示代码:
- <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: #;
- 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-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.3);
- border-radius: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar
- {
- width: 12px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- border-radius: 10px;
- -webkit-box-shadow: inset 6px rgba(,,,.);
- background-color: #;
- }
- /*
- * STYLE 2
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.3);
- border-radius: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar
- {
- width: 12px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- border-radius: 10px;
- -webkit-box-shadow: inset 6px rgba(,,,.);
- background-color: #D62929;
- }
- /*
- * STYLE 3
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.3);
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar
- {
- width: 6px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- background-color: #;
- }
- /*
- * STYLE 4
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.3);
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- background-color: #;
- border: 2px solid #;
- }
- /*
- * STYLE 5
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.3);
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- background-color: #0ae;
- background-image: -webkit-gradient(linear, , %,
- color-stop(., rgba(, , , .)),
- color-stop(., transparent), to(transparent));
- }
- /*
- * STYLE 6
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.3);
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- background-color: #F90;
- background-image: -webkit-linear-gradient(45deg,
- rgba(, , , .) %,
- transparent %,
- transparent %,
- rgba(, , , .) %,
- rgba(, , , .) %,
- transparent %,
- transparent)
- }
- /*
- * STYLE 7
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.3);
- background-color: #F5F5F5;
- border-radius: 10px;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- border-radius: 10px;
- background-image: -webkit-gradient(linear,
- left bottom,
- left top,
- color-stop(0.44, rgb(,,)),
- color-stop(0.72, rgb(,,)),
- color-stop(0.86, rgb(,,)));
- }
- /*
- * STYLE 8
- */
- #style-::-webkit-scrollbar-track
- {
- border: 1px solid black;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- background-color: #;
- }
- /*
- * STYLE 9
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.3);
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- background-color: #F90;
- background-image: -webkit-linear-gradient(90deg,
- rgba(, , , .) %,
- transparent %,
- transparent %,
- rgba(, , , .) %,
- rgba(, , , .) %,
- transparent %,
- transparent)
- }
- /*
- * STYLE 10
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.3);
- background-color: #F5F5F5;
- border-radius: 10px;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- background-color: #AAA;
- border-radius: 10px;
- background-image: -webkit-linear-gradient(90deg,
- rgba(, , , .) %,
- transparent %,
- transparent %,
- rgba(, , , .) %,
- rgba(, , , .) %,
- transparent %,
- transparent)
- }
- /*
- * STYLE 11
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.3);
- background-color: #F5F5F5;
- border-radius: 10px;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- background-color: #3366FF;
- border-radius: 10px;
- background-image: -webkit-linear-gradient(0deg,
- rgba(, , , 0.5) %,
- transparent %,
- transparent %,
- rgba(, , , 0.5) %,
- rgba(, , , 0.5) %,
- transparent %,
- transparent)
- }
- /*
- * STYLE 12
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.9);
- border-radius: 10px;
- background-color: #;
- }
- #style-::-webkit-scrollbar
- {
- width: 12px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- border-radius: 10px;
- background-color: #D62929;
- background-image: -webkit-linear-gradient(90deg,
- transparent,
- rgba(, , , 0.4) %,
- transparent,
- transparent)
- }
- /*
- * STYLE 13
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.9);
- border-radius: 10px;
- background-color: #CCCCCC;
- }
- #style-::-webkit-scrollbar
- {
- width: 12px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- border-radius: 10px;
- background-color: #D62929;
- background-image: -webkit-linear-gradient(90deg,
- transparent,
- rgba(, , , 0.4) %,
- transparent,
- transparent)
- }
- /*
- * STYLE 14
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.6);
- background-color: #CCCCCC;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- background-color: #FFF;
- background-image: -webkit-linear-gradient(90deg,
- rgba(, , , ) %,
- rgba(, , , ) %,
- transparent %,
- rgba(, , , ) %,
- transparent)
- }
- /*
- * STYLE 15
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.1);
- background-color: #F5F5F5;
- border-radius: 10px;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- border-radius: 10px;
- background-color: #FFF;
- background-image: -webkit-gradient(linear,
- % %,
- % %,
- from(#4D9C41),
- to(#19911D),
- color-stop(.,#54DE5D));
- }
- /*
- * STYLE 16
- */
- #style-::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.1);
- background-color: #F5F5F5;
- border-radius: 10px;
- }
- #style-::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- #style-::-webkit-scrollbar-thumb
- {
- border-radius: 10px;
- background-color: #FFF;
- background-image: -webkit-linear-gradient(top,
- #e4f5fc %,
- #bfe8f9 %,
- #9fd8ef %,
- #2ab0ed %);
- }
- /*
- * body
- */
- body::-webkit-scrollbar-track
- {
- -webkit-box-shadow: inset 6px rgba(,,,0.1);
- background-color: #F5F5F5;
- border-radius: 10px;
- }
- body::-webkit-scrollbar
- {
- width: 10px;
- background-color: #F5F5F5;
- }
- body::-webkit-scrollbar-thumb
- {
- border-radius: 10px;
- background-color: #FFF;
- background-image: -webkit-gradient(linear,% %,% %,from(#4D9C41),to(#19911D),color-stop(.,#54DE5D));
- }
- </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>
自定义滚动条样式纯(css)的更多相关文章
- CSS自定义滚动条样式
原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...
- css中渐变的分割线和自定义滚动条样式
css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 自定义滚动条样式-transition无效
问题 需求是自定义滚动条样式,然后2秒内无操作隐藏滚动条. 2s内隐藏比较麻烦,不能用css实现,只能监听容器的touch事件,然后给滚动条加个opacity: 0的class. .class::-w ...
- WPF 自定义滚动条样式
先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- 使用css实现无滚动条滚动+使用插件自定义滚动条样式
使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 之 -webkit-scrollbar
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
随机推荐
- API统一管理平台-YApi
前言:开发过程中,会产生很多接口对接操作,这个时候可能需要一个接口管理平台管理已经开发好的接口方便业务对接. 一.概述 YApi 是高效.易用.功能强大的 api 管理平台,旨在为开发.产品.测试人员 ...
- SQLi-LABS Page-1(Basic Challenges) Less5-Less10
Less5 GET - Double Injection - Single Quotes http://10.10.202.112/sqli/Less-5?id=1 http://10.10.202. ...
- 使用adb命令操控Android手机(adb命令)
1) 手机连接电脑之前 首先,查看安卓手机是否已经连接上电脑 adb devices 让adb一直查找安卓设备,找到后才停止 adb wait-for-device 2) 手机连接电脑后的操作 2.0 ...
- html-css___table属性(设置细线边框)
border-collapse 属性设置表格的边框是否被合并为一个单一的边框 //设置table实线边框 table,td{ /*边框合并*/ border-collapse: collapse; b ...
- Windows下使用PuTTY连接Centos7、Linux系统目录结构、一些操作命令
PuTTY可以远程管理Linux.PuTTY官网:https://www.putty.org/ 一.使用PuTTY连接Centos7 下载安装后,打开如下图: 1.输入主机名或IP地址2.端口号默认2 ...
- 【三】Gradle中的Task
gradle中,最经常被使用的,一个task,一个是dependencies 1.Task声明 task默认是DefaultTask类, Task中有两个属性 group description,最佳 ...
- Saltstack_使用指南18_API
1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...
- HDFS与YARN HA部署配置文件
core-site.xml <!--Yarn 需要使用 fs.defaultFS 指定NameNode URI --> <property> <name>fs.de ...
- Docker 运行一个Web应用
使用 docker 构建一个 web 应用程序. 我们将在docker容器中运行一个 Python Flask 应用来运行一个web应用 参数说明: -d:让容器在后台运行. -P:将容器内部使用的网 ...
- Python进阶基础学习(多线程)
Python进阶学习笔记(一) threading模块 threading.thread(target = (函数)) 负责定义子线程对象 threading.enumerate() 负责查看子线程对 ...