自定义滚动条样式纯（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浏览器是如何自定义滚动条的呢? 前言 ...
随机推荐
- .Netcore Swagger - 解决外部库导致的“Actions require an explicit HttpMethod binding for Swagger 2.0”
现象: 项目中导入Ocelot后,swagger页面无法正常显示,查看异常发现 Ocelot.Raft.RaftController 中的 Action 配置不完全,swagger扫描时不能正确生成 ...
- CSS学习笔记-背景属性
一.背景尺寸属性: 1.含义: 背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小 2.格式: 1.1具体像素: backgro ...
- ArcGIS以数据库作为数据源作为source发布服务步骤详解（以Postgresql为例）及各种发布问题
创建企业级数据库 Data Management Tools-->Geodatabase Administration-->Create Enterprise Geodatabase 按如 ...
- Android8.1 源码修改之通过黑名单屏蔽系统短信功能和来电功能
前言 之前写过一篇Android6.0 的屏蔽系统短信功能和来电功能,具体看这里 同样的最近有个新需求,需要将8.1 设备的来电功能和短信功能都屏蔽掉,特殊产品就是特殊定制,那就开始吧. 屏蔽短信功能 ...
- Spring Boot 2 + Thymeleaf：服务器端表单验证
表单验证分为前端验证和服务器端验证.服务器端验证方面,Java提供了主要用于数据验证的JSR 303规范,而Hibernate Validator实现了JSR 303规范.项目依赖加入spring-b ...
- 转战物联网·基础篇05-通俗理解MQTT协议的实现原理和异步方式
网络上搜索MQTT协议,会出现太多的解释,这里就不做官方标准释义的复制了.这一节我们从实战理解角度,通俗的将MQTT协议的作用及实现原理说一下,旨在可以快速理解MQTT协议.所以可能会出现很多看似 ...
- linux 的swap、swappiness及kswapd原理【转】
本文讨论的 swap基于Linux4.4内核代码 .Linux内存管理是一套非常复杂的系统,而swap只是其中一个很小的处理逻辑. 希望本文能让读者了解Linux对swap的使用大概是什么样子.阅读完 ...
- 04_javaSE面试题:方法的参数传递机制
题目 import java.util.Arrays; /** * @author kevin * @date 2019/7/10 9:46 */ public class Exam4 { publi ...
- AutoCAD配置的Heidi驱动程序未加载
电脑安装的软件越来越多,有的软件也就偶尔使用一下下,于是就找了一个绿化版的AutoCAD,挺好的,可启动时弹出"配置的Heidi驱动程序未加载.切换到默认软件驱动程序". 对于上述 ...
- Codeforces Round #603 (Div. 2) D. Secret Passwords 并查集
D. Secret Passwords One unknown hacker wants to get the admin's password of AtForces testing system, ...