webkit下面的CSS设置滚动条

webkit下面的CSS设置滚动条

1.主要有下面7个属性:

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

2.如图:

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

1):horizontal 水平方向的滚动条

2):vertical 垂直 方向的滚动条

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

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

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

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

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

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

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

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

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

4.用法:

原文地址:https://www.cnblogs.com/Michelle20180227/p/9322659.html

时间: 2024-08-24 14:28:23

webkit下面的CSS设置滚动条的相关文章

CSS设置滚动条样式

因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: 下面就讲解这几个属性怎么使用,代表什么意思. 一:webkit下面的CSS设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-trac

转载自前端开发:CSS设置滚动条样式

浏览器默认的滚动条样子太过屌丝了,得自己动手整整.记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持.无意间看到网易邮箱的滚动条样子很好看,一开始以为是用div模拟的,结果一看,吼吼,正合我意,利用的CSS来设置的,而且是webkit浏览器的. 得好好研究这几个属性下,才能自己动手改造. webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scroll

CSS设置滚动条样式[转]

原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track  外层轨道 ::-webkit-scrollbar-track-piece  内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-

css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以参考下,很有用的 1 div { 2 scrollbar-face-color: #fcfcfc; 3 scrollbar-highlight-color: #6c6c90; 4 scrollbar-shadow-color: #fcfcfc; 5 scrollbar-3dlight-color:

Velocity下面的Velocimacros设置

Velocimacros #macro script element允许模板设计者定义一段可重用的VTL template.Velocimacros广泛用于简单和复杂的行列.Velocimacros的出现是为了减少编码和极小化排版错误,对Velocimacros的概念提供一个介绍. #macro( d ) <tr><td></td></tr> #end 在上面的例子中Velocimacro被定义为d,然后你就可以在任何VTL directive中以如下方式调

css设置滚动条并显示或隐藏

看效果,没有滚动条,超出div,开发中肯定不行. 有滚动条 最后就是想隐藏滚动条 代码 有滚动条并显示 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body style="width:229px; h

IE6下面的css调试工具

在开发过程中,代码部分实现之后,就要着手于前台展示部分的界面,公司的美工又是新手,无奈,只有自己慢慢调了,但IE6之前的版本都没有好的调试工具,后来在网上搜索了一个 IE Developer Toolbar 这个工具还不错,但是对于我这个用习惯chrome和firefox的人来说,确实是个不小的挑战,于是乎最近又在网上搜索,看看能不能找一个跟chrome或者是firedebug类似的针对IE6的网页调试工具, 不巧真被我找到了.大喜之后,赶紧记录下,分享出来. 废话不说了. 工具的名字是fire

转 纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一

【转】纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一