使用CSS设置滚动条样式


Posted in HTML / CSS onJanuary 18, 2022

因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决。

比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的。如图所示:

使用CSS设置滚动条样式

下面就讲解这几个属性怎么使用,代表什么意思。

一:webkit下面的CSS设置滚动条

主要有下面7个属性

  • ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
  • ::-webkit-scrollbar-button 滚动条两端的按钮
  • ::-webkit-scrollbar-track  外层轨道
  • ::-webkit-scrollbar-track-piece  内层滚动槽
  • ::-webkit-scrollbar-thumb 滚动的滑块
  • ::-webkit-scrollbar-corner 边角
  • ::-webkit-resizer 定义右下角拖动块的样式

如图所示:

使用CSS设置滚动条样式

上面是滚动条的主要几个设置属性,还有更详尽的CSS属性

:horizontal水平方向的滚动条

:vertical垂直 方向的滚动条

:decrement应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)

:incrementdecrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)

:start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

:end类似于start伪类,标识对象是否放到滑块的后面。

:double-button该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。

:single-button类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。

:no-button用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。

:corner-present用于所有滚动条轨道,指示滚动条圆角是否显示。

:window-inactive用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

CSS也很简单,例:

/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
}

二:IE下面的CSS设置滚动条

IE下面就比较简单那了,自定义的项目比较少,全是颜色。

  • scrollbar-arrow-color: color; /*三角箭头的颜色*/
  • scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/
  • scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
  • scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/
  • scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
  • scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
  • scrollbar-track-color: color; /*立体滚动条背景颜色*/
  • scrollbar-base-color:color; /*滚动条的基色*/

到此这篇关于使用CSS设置滚动条样式的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

 
HTML / CSS 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
在CSS中使用when/else的方法
Jan 18 #HTML / CSS
CSS使用伪类控制边框长度的方法
浅谈css实现背景颜色半透明的两种方法
Dec 06 #HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
DIV CSS实现网页背景半透明效果
CSS实现五种常用的2D转换
You might like
使用PHP编写的SVN类
2013/07/18 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
phpfpm的作用和用法
2019/10/10 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
通过python3实现投票功能代码实例
2019/09/26 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
融资租赁计划书
2014/04/29 职场文书
公司授权委托书范文
2014/09/21 职场文书
党员争先创优承诺书
2015/01/20 职场文书
财务工作失误检讨书
2015/02/19 职场文书
法人代表证明书范本
2015/06/18 职场文书
创业计划书之酒吧
2019/12/02 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS