使用CSS设置滚动条样式

  发布时间:2021-12-20 15:34:46   作者:佚名   我要评论
这篇文章介绍了使用CSS设置滚动条样式,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

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

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

主要有下面7个属性

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

如图所示:

上面是滚动条的主要几个设置属性,还有更详尽的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设置滚动条样式的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 使用CSS设置滚动条样式

    这篇文章介绍了使用CSS设置滚动条样式,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-12-20
  • 在CSS中使用when/else的方法

    这篇文章主要介绍了在CSS中使用when/else的方法,关于使用 @if 还是 @when 的问题也存在一些争议,怕 @if会与 Sass 冲突,还有一个建议是用 @where 来代替,具体内容详情跟
    2021-12-15
  • CSS使用伪类控制边框长度的方法

    需要实现一个边框长度比容器长度小一些的边框时,以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果,并且使用起来很方便,下面通过本文给大家介绍CSS使用
    2021-12-15
  • 使用 CSS 轻松实现一些高频出现的奇形怪状按钮

    本文基于一些高频出现在设计稿中的,使用 CSS 实现稍微有点难度和技巧性的按钮,讲解使用 CSS 如何尽可能的实现它们,让我们一起看看使用 CSS 轻松实现一些高频出现的奇形
    2021-12-01
  • CSS实现五种常用的2D转换

    CSS 中的2D转换允许我们在二维空间中执行一些基本的变换操作,例如移动、旋转、缩放或扭曲等,本文主要介绍了CSS常用的五个变换:translate()、rotate()、scale()、skew()
    2021-11-30
  • CSS巧用渐变实现高级感背景光动画

    本文主要介绍了利用CSS中的conic-gradient()以及box-shadow模拟出光源阴影效果,从而实现一个充满高级感的背景光动画,感兴趣的小伙伴可以跟随小编一起学习一下
    2021-11-30
  • CSS中妙用 drop-shadow 实现线条光影效果

    本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中,需要的朋友
    2021-11-08
  • 仅仅使用 HTML/CSS 实现各类进度条的方式汇总

    这篇文章主要介绍了仅仅使用 HTML/CSS 实现各类进度条的方式汇总,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-08
  • 纯 CSS 自定义多行省略的问题(从原理到实现)

    这篇文章主要介绍了纯 CSS 自定义多行省略的问题(从原理到实现),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-08
  • CSS作用域(样式分割)的使用汇总

    scoped 属性是 HTML5 中的新属性,是一个布尔属性,如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素,本文给大家介绍CSS作用域(样式分割)的使用汇总,感
    2021-11-03

最新评论