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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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 分页原理详解
2009/08/21 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
python+os根据文件名自动生成文本
2019/03/21 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
python eventlet绿化和patch原理
2020/11/21 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
二年级数学教学反思
2014/01/21 职场文书
学雷锋月活动总结
2014/04/25 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
司机岗位职责范本
2015/04/10 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python