帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 滚动条美化(支持横向)
滚动条美化(支持横向)
浏览:1398次
-
评论:0次
-
发布时间:2017-11-30
Html
Css
Js
.scrollbar { margin-left:30px; float:left; height:300px; width:65px; background:#F5F5F5; overflow-y:scroll; margin-bottom:25px; } .force-overflow { min-height:450px; min-width:500px; } #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%); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.10.2
<!doctype html><html><head><meta charset="utf-8"><title>滚动条美化(支持横向)-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:Css滚动条美化支持纵向和横向的
jQuery Css步骤进度条
实现简单别踩白块
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1398
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值