CSS3自定义滚动条
2024-05-29 02:32:38
<!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: 12px;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>
CSS3自定义滚动条相关推荐
- html自定义横纵向滚动条,详解css3自定义滚动条样式写法
本文介绍了css3自定义滚动条样式写法,分享给大家,具体如下: 先简单介绍一下各个属性 ::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,backgrou ...
- CSS3自定义滚动条样式 ::webkit-scrollbar
windows 下默认的滚动条样式巨丑,项目中又有比较多地方会显示滚动条, 故回头翻了一下CSS3, 还真能不用插件实现自定义滚动条的样式,正合我意 代码如下: /*定义滚动条高宽及背景 高宽分别对应 ...
- html滚动条样式自定义,CSS3自定义滚动条样式
CSS3对于滚动条也做了特别支持,可惜目前只有webkit内核的支持比较好,IE支持不完全,详细兼容性请查看http://caniuse.com/#search=scrollbar. 主要有7个属性: ...
- CSS3自定义滚动条样式
效果图: HTML: <div class="box"><div class="transcrided_text"></div&g ...
- div滚动条样式css3,CSS3自定义滚动条样式的示例详解
在前面一篇文章中,我们给大家介绍了CSS设置div滚动条样式,我们都知道当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. ...
- CSS3自定义滚动条样式实战 -webkit-scrollbar
前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 演示 来看看这2个滚动 ...
- java中滚动条样式,CSS3自定义滚动条样式 -webkit-scrollbar
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义.首先我们要了解滚动条.滚动条从外观来看是由两部分组成: 1.可以滑动的部分 ...
- CSS3自定义滚动条样式 -webkit-scrollbar
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar{width: 4px;background-color: #ccc;border-radius: 5 ...
- css3自定义滚动条样式写法
欢迎访问我的个人博客 http://xiaolongwu.cn/ 先简单介绍一下各个属性 ::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,backgro ...
最新文章
- Kafka 基本原理（8000 字小结）
- 关于 Session 的深入探讨
- 自动备份html文件,windows下定期自动备份本地文件(文件夹)
- 鸿蒙历程及路标没有适配手机,鸿蒙2.0来了？华为开发者大会时间确认：Mate40会不会首发？...
- 【Flink】Flink No JAAS configuration section named Client ERROR:Authentication failed
- 在eclipse4.5.1官方英文版利用官方语言包汉化的方法
- java swing 提示信息,java swing工具提示与不同的消息
- android+制作开机动画,Android 开机动画制作详解
- win10下SVN图标不显示
- r语言和python爬虫谁厉害_从事数据科学Python和R语言学哪个好？
- 两台计算机互联方案,两台电脑共享(无线上网)最佳解决方案_网络协议
- 第四章 信道与信道容量
- 华三防火墙配置IPSec隧道
- opencv 全志_Banana Pi 开发板-【BPI-M2 Berry试用】论opencv3.3.0编译的那些坑（非成功版）-电路城论坛 - 电子工程师学习交流园地...
- Intel NUC8i5BEH安装Windows10+Hackintosh双系统
- 这次的深夜食堂来到了清迈，只为寻找那些…
- 请编写一个程序，使用字典存储学生信息，学生信息包括学号和姓名，请根据学生学号从小到大输出学生的信息。
- ubuntu12.04 禁用访客
- DX 纹理像素格式转换算法 R10G10B10A2 转 R8G8B8A8
- 《荒漠甘泉》4月16日
热门文章
- Android 进阶 Fragment 介绍和使用 (一）
- Java层与Jni层的数组传递（转）
- CSS Overflow属性详解(转)
- 瑞友虚拟服务器网页登录,瑞友云端虚拟专网系统
- 全局程序集缓存gac中安装程序集_我就不信2W字把源码拆的这么碎，你还不明白mybatis缓存...
- 神经网络与机器学习 笔记—卷积神经网络（CNN）
- Windows PE变形练手3-把通用模板机器码直接覆盖目标PE
- Windows PE导出表编程2（重组导出表函数地址）
- 【数字信号处理】相关函数 ( 相关系数与相关函数 | 相关函数定义 )
- 【Android 启动过程】Activity 启动源码分析 ( ActivityThread -＞ Activity、主线程阶段 一 )