html 滚动条_数十种自定义多彩多样滚动条样式
pc端开发过程中有没有遇到过因为原生滚动条的样式问题,让整个项目事倍功半;有没有遇到过因为因为默认滚动条的缘故,被客户说页面做得真chou,一条毁所有呀。
接下来,下面你看到的,就是完美解决方案!当然,有这么多,不限制于这么多,随意修改,百花盛开。
Demo1
css源码
.srcoll_one::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}.srcoll_one::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}.srcoll_one::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #4078cb;}
html源码
Demo2
css源码
.srcoll_two::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px;}.srcoll_two::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_two::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #FFF; background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);}
html源码
Demo3
css源码
.srcoll_three::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px;}.srcoll_three::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_three::-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))}
html源码
Demo4
css源码
.srcoll_four::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}.srcoll_four::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}.srcoll_four::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #D62929;}
html源码
Demo5
css源码
.srcoll_five::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}.srcoll_five::-webkit-scrollbar{ width: 6px; background-color: #F5F5F5;}.srcoll_five::-webkit-scrollbar-thumb{background-color: #000000;}
html源码
Demo6
css源码
.srcoll_six::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}.srcoll_six::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_six::-webkit-scrollbar-thumb{ background-color: #000000; border: 2px solid #555555;}
html源码
Demo7
css源码
.srcoll_seven::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}.srcoll_seven::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_seven::-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));}
html源码
Demo8
css源码
.srcoll_eight::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}.srcoll_eight::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_eight::-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)}
html源码
Demo9
css源码
.srcoll_nine::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}.srcoll_nine::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_nine::-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)));}
html源码
Demo10
css源码
.srcoll_ten::-webkit-scrollbar-track{ border: 1px solid black; background-color: #F5F5F5;}.srcoll_ten::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_ten::-webkit-scrollbar-thumb{background-color: #000000;}
html源码
Demo11
css源码
.srcoll_eleven::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}.srcoll_eleven::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_eleven::-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)}
html源码
Demo12
css源码
.srcoll_twelve::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}.srcoll_twelve::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_twelve::-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)}
html源码
Demo13
css源码
.srcoll_thirteen::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}.srcoll_thirteen::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_thirteen::-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)}
html源码
Demo14
css源码
.srcoll_fourteen::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #444444;}.srcoll_fourteen::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}.srcoll_fourteen::-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)}
html源码
搬你想搬,盖你所需,码字不易,且行且珍惜!
html 滚动条_数十种自定义多彩多样滚动条样式相关推荐
- vue 滚动条_轻量级 React.js 虚拟美化滚动条组件RScroll
前几天有给大家分享一个Vue自定义滚动条组件VScroll.今天再分享一个最新开发的React PC端模拟滚动条组件RScroll. vue+pc桌面端模拟滚动条组件VScroll rscroll 一 ...
- js 隐藏滚动条_轻量级 React.js 虚拟美化滚动条组件RScroll
前几天有给大家分享一个Vue自定义滚动条组件VScroll.今天再分享一个最新开发的React PC端模拟滚动条组件RScroll. vue+pc桌面端模拟滚动条组件VScroll rscroll 一 ...
- iscroll 没有滚动条_带iScroll的iPhone滚动条
iscroll 没有滚动条 Since we've had web browsers and JavaScript, we've been intent on replacing native bro ...
- 木马下载器盗号数十种 破天木马剑指网游
"木马下载器20480"(Win32.TrojDownloader.wmTable.a.20480),这是一个下载者病毒.此病毒文件为muma.exe的可执行文件,但并不局限于该名 ...
- 文心千帆:PPT 制作、数字人主播一键开播等数十种应用场景惊艳到我了,下面给出简介和使用指南,快去使用起来吧
文心千帆:PPT 制作.数字人主播一键开播等数十种应用场景惊艳到我了,下面给出简介和使用指南,快去使用起来吧 文心千帆大模型平台是面向企业开发者的一站式大模型开发及服务运行平台.文心千帆不仅提供了包括 ...
- 阿里云_数加平台类HQL的那些坑
简介 近期在练习机器学习算法,部分数据本机跑太慢了.恰好阿里云有在线的机器学习平台,所以不妨用阿里云来实现了. 将之前MySQL数据迁移到阿里云上,这个过程主要比较顺利的.但后面修改特征提取sql时就 ...
- 【js组件】仿照steam样式制造自定义横向纵向滚动条
chrome支持部分的滚动条修改,但是很多浏览器内核不支持,所以使用js自定义滚动条. 1.横向自定义滚动条 这是未添加数据未更新的时候的样子 添加数据后使用update方法,滚动条长度自动变 下载链 ...
- 如何微信链接自定义_微信链接自定义
微信在分享第三方网站是不显示缩略图和描述的,如下图所示 微信链接自定义_微信链接自定义 要解决这个问题必须调用微信JS-SDK接口,下面讲一下如何调用接口. 第一部分 准备步骤 注册微信公众号. 通过 ...
- 自定义IE浏览器滚动条样式
自定义IE浏览器滚动条样式 原文地址:http://www.cnblogs.com/koleyang/p/5484922.html 追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支 ...
最新文章
- 模板 - 拓扑排序
- ACL Fellow 2021名单出炉!华为刘群、中科院自动化所宗成庆当选!
- 一个身份证号码验证接口[2]
- python xgboost参数_如何对XGBoost模型进行参数调优
- Team photo的新api
- Apache查看并发及TIME_WAIT过多的解决
- MySQL中根据A表画更新B表
- 关于axios中'$router' of undefined问题
- 20140708testC
- 光学成像原理之景深(Depth of Field)
- 用Python画个新冠病毒
- 防止iOS自动识别数字为电话号码
- android 9.0 10.0 去掉音量键+Power键组合键的屏幕截图功能
- 致铭主板好礼等着您拿
- linkedList手写
- uni app 安装 vconsole
- WEKA——数据挖掘与机器学习工具
- C语言写一个小程序,胖胖的爱心桃
- chrome打开本地html自动刷新,谷歌浏览器插件Auto Refresh 网页自动刷新
- 例3.2 计算存款利息。有1000元,想存一年。有3种方法可选:。。。