自定义滚动条样式纯（css）

时间：2023-01-12 16:50:04

啥都不说先看图:

自定义滚动条样式纯（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）的更多相关文章

  1. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  2. css中渐变的分割线和自定义滚动条样式

    css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...

  3. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  4. 自定义滚动条样式-transition无效

    问题 需求是自定义滚动条样式,然后2秒内无操作隐藏滚动条. 2s内隐藏比较麻烦,不能用css实现,只能监听容器的touch事件,然后给滚动条加个opacity: 0的class. .class::-w ...

  5. WPF 自定义滚动条样式

    先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...

  6. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  7. 使用css实现无滚动条滚动&plus;使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

  8. CSS3自定义滚动条样式 -webkit-scrollbar&lpar;转&rpar;

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  9. CSS3自定义滚动条样式 之 -webkit-scrollbar

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

随机推荐

  1. nginx配置负载

    一.系统优化 1.修改/etc/sysctl.conf,优化tcp连接数 net.ipv4.tcp_fin_timeout = 30 net.ipv4.tcp_keepalive_time = 120 ...

  2. Jmeter 中通过（&lowbar;time函数）获取10位时间戳的方法

    meter的__time函数作用是取当前时间的时间戳,默认取的时间精确到了毫秒级别,所以获取的时间戳默认是13位的.  下图为取10位的时间戳的函数表达式(时间精确到秒) 

  3. &lbrack;LintCode&rsqb; Maximum Gap 求最大间距

    Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...

  4. kbengine FAQ（3）

    官方FAQ 下面是我遇到的一些问题: 1.服务端   "strtof" 未定义的标示符 对于我这个c++入门级都不算的新手,这个错误很挠头,这个错误是由于vc++版本问题,新版的语 ...

  5. AES SHA-1 SM3 MD5

    AES是美国国家标准技术研究所NIST旨在代替DES的21世纪的加密标准. 输入:128bit 的消息分组 输出:128bit 的密文分组 密钥长度及圈数 128 10 192 12 256 14 消 ...

  6. &period;net core 灵活读取配置文件

    using Microsoft.Extensions.Configuration; using System; using System.Collections.Generic; using Syst ...

  7. org&period;hibernate&period;ObjectNotFoundException&colon; No row with the given identifier exists

    维护老系统时出现的问题,出现的原因我简述一下: table1与table2是关联表,T1中有T2的主键 "T1_id",当T1中的 "T2_id" 不为null ...

  8. Flask最强攻略 - 跟DragonFire学Flask - 第十四篇 Flask-SQLAlchemy

    前不久刚刚认识过了SQLAlchemy,点击这里复习一下 当 Flask 与 SQLAlchemy 发生火花会怎么样呢? Flask-SQLAlchemy就这么诞生了 首先要先安装一下Flask-SQ ...

  9. spring boot报Unsupported Media Type Content type &&num;39&semi;&ast;&sol;&ast;&semi;charset&equals;UTF-8&&num;39&semi; not supported

    1.请求设置Content-Type:application/json即可 ajax一般默认:Content-Type: application/x-www-form-urlencoded;chars ...

  10. Puppet报错汇总

    报错1: 解决:该报错是由于Puppet agent 的时间和Puppet master的时间不一致导致,可以使用ntp同步一下时间即可解决 报错2: 启动mcollective的时候报错 解决:ge ...

相关文章