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和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
html5唤醒APP小记
Mar 27 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/04/27 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
使javascript也能包含文件
2006/10/26 Javascript
asp 的 分词实现代码
2007/05/24 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
工程部经理岗位职责
2013/12/08 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
总经理检讨书范文
2015/02/16 职场文书
工作调动申请报告
2015/05/18 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL