使用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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
php预定义常量
2006/12/25 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
php中yii框架实例用法
2020/12/22 PHP
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
警察思想汇报
2014/01/04 职场文书
办公室主任职责范本
2014/03/07 职场文书
婚前财产协议书范本
2014/10/19 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
写给医生的感谢信
2015/01/22 职场文书
关于长城的导游词
2015/01/30 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书