CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解


Posted in HTML / CSS onJune 01, 2020

windows 下默认的滚动条样式巨丑,项目中又有比较多地方会显示滚动条, 故回头翻了一下CSS3, 还真能不用插件实现自定义滚动条的样式,正合我意

代码如下:

/定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/

::-webkit-scrollbar  
{  
    width: 6px;  
    height: 6px;  
    background-color: #F5F5F5;  
}

/定义滚动条轨道 内阴影+圆角/

::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #FFF;  
}

/定义滑块 内阴影+圆角/

::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #AAA;  
}

具体含义及其他设置项:

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

:horizontal  
//horizontal伪类适用于任何水平方向上的滚动条  
  
:vertical  
//vertical伪类适用于任何垂直方向的滚动条  
  
:decrement  
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮  
  
:increment  
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮  
  
:start  
//start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面  
  
:end  
//end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面  
  
:double-button  
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。  
  
:single-button  
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。  
  
:no-button  
no-button伪类表示轨道结束的位置没有按钮。  
  
:corner-present  
//corner-present伪类表示滚动条的角落是否存在。  
  
:window-inactive  
//适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。  
  
::-webkit-scrollbar-track-piece:start {  
/滚动条上半边或左半边/  
}  
  
::-webkit-scrollbar-thumb:window-inactive {  
/当焦点不在当前区域滑块的状态/  
}  
  
::-webkit-scrollbar-button:horizontal:decrement:hover {  
/当鼠标在水平滚动条下面的按钮上的状态/  
}

总结

到此这篇关于CSS3自定义滚动条样式 ::webkit-scrollbar的文章就介绍到这了,更多相关css3自定义滚动条样式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 #HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 #HTML / CSS
css3的focus-within选择器的使用
May 11 #HTML / CSS
CSS3实现渐变背景兼容问题
May 06 #HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 #HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 #HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 #HTML / CSS
You might like
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
webpack4+react多页面架构的实现
2018/10/25 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
Python内置函数—vars的具体使用方法
2017/12/04 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
校园新闻广播稿
2014/01/10 职场文书
大学生村官承诺书
2014/03/28 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
人民检察院起诉书
2015/05/20 职场文书
建党伟业电影观后感
2015/06/01 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
施工安全责任协议书
2016/03/23 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
Go 内联优化让程序员爱不释手
2022/06/21 Golang