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 定义右下角拖动块的样式

注:

1、-moz代表firefox浏览器私有属性

2、-ms代表ie浏览器私有属性

3、-webkit代表safari、chrome私有属性

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.用法:

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

  1. CSS设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

  2. 清除webkit浏览器css设置滚动条

    主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollb ...

  3. CSS设置滚动条样式[转]

    原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可 ...

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

    浏览器默认的滚动条样子太过屌丝了,得自己动手整整.记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持.无意间看到网易邮箱的滚动条样子很好看,一开始以为是 ...

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

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  6. 用jquery操作字体颜色覆盖当前页面的css设置

    直接使用css操作color的时候,!important一直不生效,记录下,使用下面的可以起作用 用jquery操作字体颜色覆盖当前页面的css设置 $('a[href="?p=home&a ...

  7. webkit浏览器css设置滚动条

    主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scroll ...

  8. Velocity下面的Velocimacros设置

    Velocimacros #macro script element允许模板设计者定义一段可重用的VTL template.Velocimacros广泛用于简单和复杂的行列.Velocimacros的 ...

  9. flex布局下,css设置文本不换行时,省略号不显示的解决办法

    大致是有一个main容器是flex布局,左边一个logo固定宽高,右边content动态宽度. <div class="main"> <img alt=" ...

随机推荐

  1. swoole+Redis实现实时数据推送

    <?php /** * *************************************** * 单进程保护 * * ********************************* ...

  2. FFMPEG中关于ts流的时长估计的实现(转)

    最近在做H.265 编码,原本只是做编码器的实现,但客户项目涉及到ts的封装,搞得我不得不配合了解点ts方面的东西.下面技术文档不错,转一下. ts流中的时间估计 我们知道ts流中是没有时间信息的,我 ...

  3. HTML5学习笔记(二十八):跨域

    在跨域安全性方面,有多个地方会有限制,主要是XMLHttpRequest对象的跨域限制和iFrame的跨域限制,下面我们分别来看一下. Ajax跨域(CORS) CORS是一个W3C标准,全称是&qu ...

  4. C++ 类占用空间计算方式

    1.一个类占用的空间主要是属性占用空间,而成员函数一般不占用空间,但是虚函数占用空间,需要说明的是,无论多少个虚函数,只要占用4个字节即可,也就是索引指向一个虚拟表的首位置.另外需要说明的是占用空间都 ...

  5. 【MongoDB】MongoDb的“not master and slaveok=false”错误及解决方法 mongo连接从库出现问题

    链接mongodb报错如下 2016-03-14T16:26:00.912+0800 E QUERY [thread1] Error: listDatabases failed:{ "ok& ...

  6. Android开发(十七)——关闭中间activity

    参考: http://java--hhf.iteye.com/blog/1826880

  7. pom.xml文件详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  8. el表达式字符串与变量拼接

    ${empty navigationMenu.pageid? '':'&mpage='.concat(navigationMenu.pageid)}

  9. Java编程的逻辑 (81) - 并发同步协作工具

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  10. Spring Boot 使用Java代码创建Bean并注册到Spring中

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/catoop/article/details/50558333 声明同一个类下的多个实例: packa ...