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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 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 伪造本地文件包含漏洞的代码
2011/11/03 PHP
深入PHP数据加密详解
2013/06/18 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
js返回前一页刷新本页重载页面
2014/07/29 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
深入理解Node中的buffer模块
2017/06/03 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python多线程同步实例教程
2019/08/11 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
夜大毕业自我鉴定
2013/10/11 职场文书
师范应届生教师求职信
2013/11/05 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书