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)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)

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

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

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

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

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

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

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

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

案例:

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

效果如下:

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; /*滚动条的基色*/

文章转自:http://www.cindanet.com/xdhl/485.html

CSS滚动条样式设置的更多相关文章

  1. [CSS]滚动条样式设置

    概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...

  2. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  3. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  4. css 滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

  5. HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等

    友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...

  6. css 字体样式设置大全

    css样式大全(整理版)   字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  7. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  8. overflow滚动条样式设置,ie和webkit内核

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css滚动条样式修改

    .activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollb ...

随机推荐

  1. 阿里java面试题

    引言 其实本来真的没打算写这篇文章,主要是LZ得记忆力不是很好,不像一些记忆力强的人,面试完以后,几乎能把自己和面试官的对话都给记下来.LZ自己当初面试完以后,除了记住一些聊过的知识点以外,具体的内容 ...

  2. 在WisOne平台上学习TypeScript

    TypeScript是微软公司推出的开源的类型化脚本语言,目的是用于为弱类型的javaScript提供强类型的识别和感知功能,同时它提供了类.接口.继承等相关在javaScript中不容易实现的功能, ...

  3. preprocessor设置调试宏

    调试宏:preprocessor设置 预处理器“调试”宏在Xcode项目模板的调试版本定义.预处理宏在编译时被解释和调试宏可以用来允许调试代码运行在调试版本中你的项目.如果你不确定你的项目已经确定,可 ...

  4. Linux下XordDos木马的清除

    朋友的阿里云服务器一早上报木马入侵,找我处理,登陆阿里云查看警告信息“恶意进程(云查杀)-XorDDoS木马”, 本文也可以作为服务器处理木马排查的步骤的参考文章 排查原则: 1.一般的木马都有多个守 ...

  5. exit和return

    函数名: exit() 所在头文件:stdlib.h(如果是”VC6.0“的话头文件为:windows.h) 功 能: 关闭所有文件,终止正在执行的进程. exit(1)表示异常退出.这个1是返回给操 ...

  6. VC++ 6.0 C8051F340 USB 通信 CAN 数据解析

    // HelloWorld.cpp : Defines the entry point for the console application. // /*********************** ...

  7. GPA

    原题: GPA Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  8. HDU 1263:水果(map)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1263 #include <stdio.h> #include <string.h&g ...

  9. War Chess bfs+优先队列

    War chess is hh's favorite game: In this game, there is an N * M battle map, and every player has hi ...

  10. CTF密码学之摩斯密码

    通过不用的排列顺序来表达不用的英文字母,数字和标点符号,摩斯电码由.和_构成 字母 字符 电码符号 字符 电码符号 A ._ N _. B _... O _ _ _ C _._. P ._ _. D ...