滚动轴样式.doc

xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候，默认会水平和垂直滚动条会一起出现，这是ie6的一个bug，在firefox上是正常的，出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有3种解决方案，方法1:代码： overlow-y: scroll; 原理：强制显示ie的垂直滚动条，而忽略水平滚动条优点：完全解决了这个问题, 允许你保持完整的XHTML doctype.缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条。方法2:(推荐采用)代码：html overflow-x: hidden; overflow-y: auto; 原理：隐藏横向滚动，垂直滚动根据内容自适应优点：在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现.缺点：只是隐藏了水平滚动条，如果页面真正需要水平滚动条的时候，屏幕以外的内容会因为用户无法水平滚动，而看不到。方法3:代码：body margin-right: -15px; margin-bottom: -15px; 原理：这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象.优点：在视觉上解决了这个问题.，垂直滚动根据内容自适应缺点：由于人为创建了15px的外边距(margin), 所以无法使用该填充过的屏幕区域.-设置样式在原来的html的时候，我们可以这样定义整个页面的滚动条程序代码 程序代码bodyscrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/scrollbar-highlight-color:#fff; /*- 左二 -*/scrollbar-face-color:#E4E4E4; /*- 面子 -*/scrollbar-arrow-color:#666; /*- 箭头 -*/scrollbar-shadow-color:#808080; /*- 右二 -*/scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/scrollbar-base-color:#D7DCE0; /*- 基色 -*/scrollbar-track-color:#;/*- 滑道 -*/但是同样的代码，我们应用在 xhtml下就不起作用了，我相信好多好朋友也遇到过同样的问题那么怎么才能在xhtml下应用滚动条样式呢？看下列代码htmlscrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/scrollbar-highlight-color:#fff; /*- 左二 -*/scrollbar-face-color:#E4E4E4; /*- 面子 -*/scrollbar-arrow-color:#666; /*- 箭头 -*/scrollbar-shadow-color:#808080; /*- 右二 -*/scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/scrollbar-base-color:#D7DCE0; /*- 基色 -*/scrollbar-track-color:#;/*- 滑道 -*/这段代码和上一段唯一的不同就是在css定义的元素上，一个是body一个是html。我们再测试一下，把html页面的body修改成html测试一下，发现依然可以实现效果。那到底是为什么呢？从字面上来看，xhtml比html多一个x,那么这个x其实也就是xml,为什么要加一个xml在里面？其实最根本的原因就是要让html更加结构化标准化（因为html实在是太烂）。我们在html里面定义的是body，因为html不是很标准所以这样可以生效，而在xhtml里面这样就不行了，我看看那个图很明显，body标签本身不是根元素，只有html才是根元素，而页面的滚动条也是属于根元素的，所以这就是我们为什么定义body没有效果的原因，因为我们定义的只是一个子原素。ok，我们知道了原理，来做一个试验如果把定义body或xhtml换成*，*scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/scrollbar-highlight-color:#fff; /*- 左二 -*/scrollbar-face-color:#E4E4E4; /*- 面子 -*/scrollbar-arrow-color:#666; /*- 箭头 -*/scrollbar-shadow-color:#808080; /*- 右二 -*/scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/scrollbar-base-color:#D7DCE0; /*- 基色 -*/scrollbar-track-color:#;/*- 滑道 -*/在html和xhtml都通过，因为*就是定义页面上的任何标签当然也包括了“html”这个标签。1,Overflow内容溢出时的设置overflow 水平及垂直方向内容溢出时的设置overflow-x 水平方向内容溢出时的设置overflow-y 垂直方向内容溢出时的设置以上三个属性设置的值为visible、scroll、hidden、autovisible 默认值。使用该值时，无论设置的width和height的值是多少，其中的内容无论是否超出范围都将被强制显示。hidden 效果与visible相反。任何超出width和height的内容都会不可见。scroll 无论内容是否超越范围，都将显示滚动条。auto 当内容超出范围时，显示滚动条，否则不显示。应用:没有水平滚动条:test没有垂直滚动条test没有滚动条test自动显示滚动条test2,自己定义滚动条的颜色我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:/*这里放注释的代码*/Body scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/scrollbar-face-color: #333; /*立体滚动条的颜色*/scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/scrollbar-track-color: #666; /*立体滚动条背景颜色*/scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/Cursor:url(mouse.cur); /*自定义个性鼠标*/以上2项适用与、用CSS控制滚动条样式BODY   css样式详细介绍，网页滚动条样式设置各条语句含义如下：Crollbar-Face-color:滚动条页面颜色设定；Scrollbar-Highlight-Color:滚动条斜面和左面颜色设定；Scrollbar-Shadow-Color:滚动条下斜面和右面颜色设定；Scrollbar-3Dlight-Color:滚动条上边和左边的边沿颜色设定；Scrollbar-Arrow-Color:滚动条两端箭头颜色设定；Scrollbar-Track-Color:滚动条底版颜色设定；Scrollbar-Darkshadow-Color:滚动条下边和右边的边沿颜色设定。举例说明：-白背景，紫红色边框-BODY scrollbar-face-color:#FFFFFF;scrollbar-highlight-color:#FFFFFF;scrollbar-3dlight-color:#800080;scrollbar-darkshadow-color:#800080;scrollbar-Shadow-color:#FFFFFF;scrollbar-arrow-color:#800080;scrollbar-track-color:#ffffff;IE下的滚动条样式IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，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; /*滚动条的基色*/大概就这些，你也可以定义cursor来定义滚动条的鼠标手势。这里，很久以前danger做了个基于Flash的可视化工具，简单但是好用：选中CSS选项即可自动生成CSS样式，这里不再过多的介绍了。嗯，多谢大猫老湿推荐。webkit的自定义滚动条样式yes，这里才是今天要重点介绍的。从上一部分的样式名中就可以看到，IE只能定义相关部分的color等属性，这样太不灵活了。webkit最近实现了对滚动条的支持，先看一个简单的demo：不过，webkit不再是用简单的几个CSS属性，而是一坨的CSS伪元素： :-webkit-scrollbar 滚动条整体部分 :-webkit-scrollbar-button 滚动条两端的按钮 :-webkit-scrollbar-track 外层轨道 :-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） :-webkit-scrollbar-thumb （拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？） :-webkit-scrollbar-corner 边角 :-webkit-resizer 定义右下角拖动块的样式通过这些伪元素，可以完全的重写一个网站的滚动条样式。当然webkit提供的不止这些，还有很多伪类，可以更丰富滚动条样式： :horizontal horizontal伪类应用于水平方向的滚动条 :vertical vertical伪类应用于竖直方向的滚动条 :decrement decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。) :increment increment伪类和decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。) :start start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。 :end 类似于start伪类，标识对象是否放到滑块的后面。 :double-button 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。 :single-button 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。 :no-button 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。 :corner-present 用于所有滚动条轨道，指示滚动条圆角是否显示。 :window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于:selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。关于具体的demo，这里不再做了，网上已经有很多demo可以参考，比如，webkit官方的这个，具体的线上项目中也有现成的例子，比如，QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。值得一提的是，webkit的这个伪类和伪元素的实现很强大，虽然类目有些多，但是我们可以把滚动条当成一个页面元素来定义，也差不多可以用上一些高级的CSS3属性，比如渐变、圆角、RGBa等等，当然有些地方也可以用图片，然后图片也可以转换成Base64，总之，可以尽情发挥了。PS:中间部分术语翻译不到位，欢迎斧正。CSS自定义滚动条样式 网页滚动条样式 作者:不详编辑:心无一佛浏览: 80【大中小】发布时间:4/6/2011 11:33:29 PM相信很多人都遇到过在设计中自定义滚动条样式的情景，之前