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学习之2D转换功能详解
Dec 23 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 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
APMServ使用说明
2006/10/23 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
vue ssr 指南详读
2018/06/29 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
Python中的TCP socket写法示例
2018/05/11 Python
python之文件读取一行一行的方法
2018/07/12 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python环境下安装opencv库的方法
2020/03/05 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
python 实现超级玛丽游戏
2020/11/25 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
社区庆八一活动方案
2014/02/02 职场文书
党在我心中演讲稿
2014/09/02 职场文书
优秀教师申报材料
2014/12/16 职场文书
社区文明倡议书
2015/04/28 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
15个值得收藏的JavaScript函数
2021/09/15 Javascript
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle