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动画效果抖动解决方法
Sep 03 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python的格式化输出(format,%)实例详解
2018/06/01 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python 发送json数据操作实例分析
2019/10/15 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
工程力学专业毕业生求职信
2013/10/06 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
致接力运动员广播稿
2014/02/17 职场文书
优秀班集体申报材料
2014/12/25 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
golang中的空接口使用详解
2021/03/30 Python
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
vue实现拖拽交换位置
2022/04/07 Vue.js
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
mysql幻读详解实例以及解决办法
2022/06/16 MySQL