欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

css使用overflow属性控制滚动条的样式

滚动条的样式我们可以通过css来控制的,滚动条样式主要涉及到如下overflow属性,下面简单为大家介绍下具体的控制属性,感性的朋友不要错过

滚动条样式主要涉及到如下overflow属性: 

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,其用到的表现形式和值有以下几种 

overflow: auto; 在需要时内容会自动添加滚动条 
overflow: scroll; 总是显示滚动条 
overflow-x: hidden; 禁止横向的滚动条 
overflow-y: scroll; 总是显示纵向滚动条 

以上三个属性设置的值为visible、scroll、hidden、auto 

visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。 
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。 
scroll 无论内容是否超越范围,都将显示滚动条。 
auto 当内容超出范围时,显示滚动条,否则不显示。 



复制代码
代码如下:

/*没有水平滚动条*/ 
<div style="overflow-x:hidden">test</div> 
/*没有垂直滚动条*/ 
<div style="overflow-y:hidden">test</div> 
/*没有滚动条*/ 
<div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</div> 
/*自动显示滚动条*/ 
<div style="height:100px;width:100px;overflow:auto;">test</div> 

自定义滚动条的样式实例 

复制代码
代码如下:

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); /**//*自定义个性鼠标*/ 

来自 http://www.jb51.net/css/114219.html
复制代码
代码如下:

/*没有水平滚动条*/ 
<div style="overflow-x:hidden">test</div> 
/*没有垂直滚动条*/ 
<div style="overflow-y:hidden">test</div> 
/*没有滚动条*/ 
<div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</div> 
/*自动显示滚动条*/ 
<div style="height:100px;width:100px;overflow:auto;">test</div> 

自定义滚动条的样式实例 

复制代码
代码如下:

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); /**//*自定义个性鼠标*/ 

来自 http://www.jb51.net/css/114219.html

 css 设置滚动条样式 
  

  

CSS

 

设置滚动条

 
 
 
 
 
 

样式

  

 

  

浏览器默认的滚

动条样子太过屌丝

了,得自己动手整

整。记得

IE

浏览器

有几个设置滚条的

样式,不过比较鸡

肋,

只能设置颜色之

类的,而且

webkit

下面也不支持。

编程

网站

一直想着,

碰巧

发现网易邮箱的滚

动条样子很好看,

开始以为是用

div

模拟的,结果一看,

吼吼,

正合我意,

用的

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)

。它用来指示按钮或者内层轨道是否会减小视窗的位置

(

比如,垂直滚动条的上面,水平滚动条的左边。

:increment decrement

类似,用来指示按钮或内层轨道是否会增大视窗的位置

(

比如,垂直滚动条的下面

和水平滚动条的右边。

:start 

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

 

:end 

类似于

start

伪类,标识对象是否放到滑块的后面。

 

:double-button  

该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮

中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。

 

:single-button 

类似于

double-button

伪类。

对按钮来说,

它用于判断一个按钮是否自己独立的在滚动条

的一段。对内层轨道来说,它表示内层轨道是否紧靠一个

single-button

 

:no-button 

用于内层轨道,

表示内层轨道是否要滚动到滚动条的终端,

比如,

滚动条两端没有按钮的时候。

 

:corner-present  

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

 

:window-inactive 

用于所有的滚动条轨道,指示应用滚动条的某个页面容器

(

元素

)

是否当前被激活。

(

webkit

最近的版本中,该伪类也可以用于

::selection

伪元素。

webkit

团队有计划扩展它并推动成为一个

标准的伪类

写个实例

demo

吧(请在

webkit

浏览器下观看),不能光说不练。

CSS

也很简单。

 

 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 

/* 

设置滚动条的样式

 */ 

::-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); 

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

。前些年,火狐很火,市场占有率一度威胁到

IE

的第一的位置。最近两年,火狐除了升级版本号,亮点很少;启动速度依旧很慢,内存占用居高不下,

CSS3

HTML5

支持都走在各浏览器的后面。以前是因为火狐插件比较多,在插件数量和质量被

chrome

赶上来的情况下,没有理由在使用火狐了,果断转投

chrome

 

来自  http://wenku.baidu.com/link?url=9K4j8hRMhBen7XFfr0Se7SvHzrxRFtBT2a2eyPUbYVQFBo0bQyoeNHctFbLsXo5JTpp0...


自定义浏览器滚动条的样式,打造属于你的滚动条风格

 Div+Css、jQuery  暂无标签   0 条评论  围观 0 次
 

前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下。于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个用的是Chrome的私有CSS属性。便百之谷之后,发现原来不仅仅只用Chrome,其它的浏览器在不同程度上支持自定义滚动条样式的。下面是我不断测试的结果,若有错误或不全,请在评论里面给出,我会立马更正;若有更好的方案,你可以留言,让大家都开开眼界。。。。。。

自定义IE浏览器滚动条样式

追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5.5)。下面列出了多个版本的支持性况:

滚动条样式支持情况支持浏览器版本可否继承描述
scrollbar-3dlight-colorIE特有属性IE5.5+y设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-highlight-colorIE特有属性IE5.5+y设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-face-colorIE特有属性IE5.5+y设置滚动框和滚动条箭头的颜色
scrollbar-arrow-colorIE特有属性IE5.5+y设置滚动条箭头的颜色
scrollbar-shadow-colorIE特有属性IE5.5+y设置滚动框的和滚动条箭头右下边缘的颜色
scrollbar-dark-shadow-colorIE特有属性IE5.5+y设置滚动条槽的颜色
scrollbar-base-colorIE特有属性IE5.5+y设置滚动条主要构成部分的颜色
scrollbar-track-colorIE特有属性IE5.5+y设置滚动条轨迹组成部分的颜色

为了有助于理解IE中滚动条样式的控制,你可以查看如下的图片:

win-8--ie---scrollbar

以上所写的几个四个CSS属性,足以控制Win 8系统下,IE浏览器的滚动条样式了。但经过测试,发现,其它的四个属性仍然支持(主要是在以上几个属性空缺时,就会体现其作用)。具体如下:

  1. 关于scrollbar-track-color,scrollbar-face-color与scrollbar-base-color。直接看英语单词,你就也许能明白scroll-base-color是一个备用颜色,只要前两者未设置时,它就开始起作用了。但是你得注意,当scrollbar-base-color用来作scrollbar-track-color功能来用时,你会发现,实际颜色与设定的颜色要淡一点。不信你可以这样试试:只设置一下scrollbar-base-color看看滚动条的效果。
  2. 关于scrollbar-dark-shadow-color属性,通过测试发现Win 8下IE10,IE11滚动条并没有改变。可能是win 8的滚动条重新定义了,导致没有了隐影了吧!(仅个人猜想)
  3. 通过观察我们发现,Win 8下的滚动条中,上箭头和下箭头后面的背景颜色都已经从scroll-face-color中脱离出来了,从属于scroll-track-color属性控制。

感觉IE浏览器滚动条自定制功能并不是很强,只能控制一样显示各个部分的颜色而已,像宽度,结构等都无法控制,要靠出个性点的滚动条,很难!很难!!!

自定义FireFox浏览器滚动条

在网上找了很多关于Firfox自定义浏览器滚动条的方法,发现firefox中却实是不支持的。发现了几篇说可以更改,自已也跟着代码写了几次(不知是我错了还是。。。),发现却是不起作用。以下是一点小的收获:

复制

  1. @-moz-document url-prefix(http://),url-prefix(https://) {
  2. /* 滚动条颜色 */
  3. scrollbar {
  4. -moz-appearance: none !important;
  5. background: rgb(0,255,0) !important;
  6. }
  7. /* 滚动条按钮颜色 */
  8. thumb,scrollbarbutton {
  9. -moz-appearance: none !important;
  10. background-color: rgb(0,0,255) !important;
  11. }
  12. /* 鼠标悬停时按钮颜色 */
  13.  
  14. thumb:hover,scrollbarbutton:hover {
  15. -moz-appearance: none !important;
  16. background-color: rgb(255,0,0) !important;
  17. }
  18. /* 隐藏上下箭头 */
  19. scrollbarbutton {
  20. display: none !important;
  21. }
  22. /* 纵向滚动条宽度 */
  23. scrollbar[orient="vertical"] {
  24. min-width: 15px !important;
  25. }
  26. }

实测以上代码并不起作用。但也可能是我的浏览器的版本不对吧!你可以试试,要是有效的话,你可以把你的FF版本发表在文章评论里面。

下面给两个关于FF滚动条的讨论(你多少web开发者希望FF能够像webkit内核浏览器一样程度的来支持滚动条自定义):

webkit内核的浏览器滚动条定制

在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完。例如有:Google Chrome、Opera(opera最近宣布使用webkit内核了)、360极速浏览器,猎豹浏览器等,搜狗浏览器······

下面我们来看一下webkit浏览器是如何强大的吧!

复制

  1. CSS
  2. ::-webkit-scrollbar { /* 1 */ }
  3. ::-webkit-scrollbar-button { /* 2 */ }
  4. ::-webkit-scrollbar-track { /* 3 */ }
  5. ::-webkit-scrollbar-track-piece { /* 4 */ }
  6. ::-webkit-scrollbar-thumb { /* 5 */ }
  7. ::-webkit-scrollbar-corner { /* 6 */ }
  8. ::-webkit-resizer { /* 7 */ }

以上CSS代码所管辖的区域对就关系:以上注释中的数字与下图中数字相对应。

上图正如如下所言:

  • ::-webkit-scrollbar        滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
  • ::-webkit-scrollbar-button      滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
  • ::-webkit-scrollbar-track         外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
  • ::-webkit-scrollbar-track-piece        内层轨道,滚动条中间部分(除去)。
  • ::-webkit-scrollbar-thumb               滚动条里面可以拖动的那部分
  • ::-webkit-scrollbar-corner               边角
  • ::-webkit-resizer                       定义右下角拖动块的样式

注意:对以上各个部分定义width,height时。有如下功能:若是水平滚动条,则width属性不起作用,height属性用来控制滚动条相应部分竖直方向高度;若是竖直滚动条,则height属性不起作用,width属性用来控制相应部分的宽度。

能过上面的不断的测试。在Chrome中,滚动条中的各个部分和DOM中块级元素是一样的。通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。而{}中的属性,你就像控制一般块级元素一样简单(强大啊)。

请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。

请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。

请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。

请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。

对应的源代码如下:

CSS部分代码:

复制

  1. #scroll-1 {
  2. width:200px;
  3. height:200px;
  4. overflow:auto;
  5. }
  6. #scroll-1 div {
  7. width:400px;
  8. height:400px;
  9. } #scroll-1::-webkit-scrollbar {
  10. width:10px;
  11. height:10px;
  12. }
  13. #scroll-1::-webkit-scrollbar-button {
  14. background-color:#FF7677;
  15. }
  16. #scroll-1::-webkit-scrollbar-track {
  17. background:#FF66D5;
  18. }
  19. #scroll-1::-webkit-scrollbar-track-piece {
  20. background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);
  21. }
  22. #scroll-1::-webkit-scrollbar-thumb{
  23. background:#FFA711;
  24. border-radius:4px;
  25. }
  26. #scroll-1::-webkit-scrollbar-corner {
  27. background:#82AFFF;
  28. }
  29. #scroll-1::-webkit-scrollbar-resizer {
  30. background:#FF0BEE;
  31. }

HTML结构:

复制

  1. <div id='scroll-1'>
  2. <div >
  3. <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
  4. 小天地,大世界是一个Web前端的技术博客。 主要是关于
  5. HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还
  6. 包含一些PHP语言等的实用例子。</p>
  7. <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
  8. 小天地,大世界是一个Web前端的技术博客。 主要是关于
  9. HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还
  10. 包含一些PHP语言等的实用例子。</p>
  11. <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
  12. 小天地,大世界是一个Web前端的技术博客。 主要是关于
  13. HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还
  14. 包含一些PHP语言等的实用例子。</p>
  15. <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
  16. 小天地,大世界是一个Web前端的技术博客。 主要是关于
  17. HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还
  18. 包含一些PHP语言等的实用例子。</p>
  19. <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
  20. 小天地,大世界是一个Web前端的技术博客。 主要是关于
  21. HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还
  22. 包含一些PHP语言等的实用例子。</p>
  23. </div>
  24. </div>

通过以上,我们几乎就可以来重写网站的滚动条了,但是webkit提供的还有更多的伪类,可以定制更丰富滚动条样式。本文以下内容参考:https://www.webkit.org/blog/363/styling-scrollbars/

  • :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(感觉可以学到很多东西的):http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html

下面我自已尝试着去写的DEMO,不要嫌它太丑就好。

三国平分,终归一统

为了一致的用户体验,有时我们就不得不放弃使用部分浏览器提供的CSS接口来定制滚动条,转而寻求更佳的代替方案。

其中的一中方案是使用jQuery插件,jquery-custom-content-scroller。使用插件的好处是显而易见的,但是坏处也多得去了。要是您想了解jQuery-custom-content-scroller的具体使用方法,请移步到:http://manos.malihu.gr/jquery-custom-content-scroller/

下面我就jQuery滚动条插件的使用作一下简单介绍:

第一步:在内容的顶部引入滚动条相应的样式表文件和jquery的库文件,jquery插件jquery.mcustomscrollbar文件。代码如下:

复制

  1. <link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css" >
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  3. <script src="jquery.mCustomScrollbar.concat.min.js"></script>

第二步:在要显示滚动条的元素(元素内容中必须要有溢出的块,否则就不会出现滚动条)上面,加入class="content",然后再加入以下代码:

复制

  1. <script>
  2. (function($){
  3. $(window).load(function(){
  4. $(".content").mCustomScrollbar();
  5. });
  6. })(jQuery);
  7. </script>

关于此插件的详细介绍,你可以访问官网,里面讲的相当详细,我就不再此多赘述。

原创文章,转载请注明出处:小天地,大世界[http://www.lyblog.net]
文章地址:http://www.lyblog.net/detail/314.html

上一篇:织梦后台卡死的原因分析及解决办法
下一篇:CSS 3 Media Queries 学习小结

 

添加新评论

电子邮件地址不会被公开。 必填项已用*标注

 

 

已有 24 条评论

  1. 图片 icon_wink.gif
     
  2. 大神能把火狐成功的代码发一下么
     
  3. 厉害啊
     
     
  4. 厉害啊
     
     
  5. 学习了!朋友!
     
  6. 我想问一下谁知道使用JQ将图片定义为容器滚动条的方法同时时支持滚轮滴。
     
  7. 在火狐里面就不支持啊。
     
  8. 取其精华,去其糟粕。webkit内核浏览器滚动条样式修改整理版。

    请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地,大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还 包含一些PHP语言等的实用例子。

    请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地,大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还 包含一些PHP语言等的实用例子。

     
  9. 滚动条样式效果演示参见:
     
    1. ***此内容仅管理员及评论者本人可见***
      icon_mad.gif
       
  10.  
     
  11. 收藏....注重细节
     
  12. firefox不支持
     
  13. 感觉看了您的翻译还没不明白start以及end的用法,感觉没有用自己的话解释,就像将原文直译了一下 icon_cry.gif
     
  14. ff木有效果啊 icon_smile.gif
     
  15. 在IE看所有滚动条样式都没变,这个没有做到兼容IE的吗?
     
    1. 是啊 我晕 试了半天
       
  16. 适合初学者,挺好的。
     
  17. 刚看到很强大的样子,增在找chrome的滚动条,先试试
     
  18. 超赞!!!!!!!!!!!!!!!!!!!!!
     
  19. 留言是一种美德······
     
  20. 教程很详细,从页面到滑动条,博客凸显的就是个性。
     
  21. [private]
     
    [/private] icon_exclaim.gif icon_exclaim.gif icon_idea.gif icon_mrgreen.gif
     
  22. 写得很详细!这个算是css3的么?
     
    1. 这个不算CSS 3,应该只能算作浏览器的私用属性吧!
       
  23. 没个浏览器都有着自己的一套规范,最不喜欢了。都打着支持标准却干着累死开发员的活儿。极度厌恶呢
     
  24. 这是一个评论邮件通知测试
     
    1. 回复测试
       
    2. 这个是一个回复测试
       
      1. 到现在为止,没有收到mail。哈哈哈哈
         
        1. 不好意思,最近这个只是在本地弄好了。放在边服务器上配的有问题(现在浏览统计都不能用了),一叫工作人员解决,都叫我去wordpress官方去问是什么原因,然后才给弄,蛋痛!还是过段时间去成网弄个云主机,自己来配吧!
           
          1. 收藏了,另外,有什么方法能使元素覆盖在滚动条之上么?
来自  http://www.lyblog.net/detail/314.html


CSS3自定义滚动条样式 -webkit-scrollbar

 41695人阅读 评论(0) 收藏 举报
 

目录(?)[+]

 

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?

前言

webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。

演示

来看看这2个滚动条demo: demo1(图片版)demo2(纯CSS3版)

滚动条组成

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
  • ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

简洁版

这里就不贴出详细代码了,demo里面可以通过查看源码寻找具体样式的设置。来看看demo2中第二个滚动条的样式

 

[css] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
  2. ::-webkit-scrollbar  
  3. {  
  4.     width16px;  
  5.     height16px;  
  6.     background-color#F5F5F5;  
  7. }  
  8.   
  9. /*定义滚动条轨道 内阴影+圆角*/  
  10. ::-webkit-scrollbar-track  
  11. {  
  12.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
  13.     border-radius: 10px;  
  14.     background-color#F5F5F5;  
  15. }  
  16.   
  17. /*定义滑块 内阴影+圆角*/  
  18. ::-webkit-scrollbar-thumb  
  19. {  
  20.     border-radius: 10px;  
  21.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
  22.     background-color#555;  
  23. }  

 

详细设置

 

定义滚动条就是利用伪元素与伪类,那什么是伪元素和伪类呢?

伪类大家应该很熟悉:link,:focus,:hover,此外CSS3中又增加了许多伪类选择器,如:nth-child,:last-child,:nth-last-of-type()等。

CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after。那么在CSS3中,伪元素进行了调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”,另外CSS3还增加了一个“::selection”。两个“::”和一个“:”在css3中主要用来区分伪类和伪元素。

webkit的伪类和伪元素的实现很强,可以把滚动条当成一个页面元素来定义,再结合一些高级的CSS3属性,比如渐变、圆角、RGBa等等。然后如果有些地方要用图片,可以把图片也可以转换成Base64,不然每次都得加载那个多个图片,增加请求数。

任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂,具体怎么写可以看第一个demo,那里也有注释。

[css] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. :horizontal  
  2. //horizontal伪类适用于任何水平方向上的滚动条  
  3.   
  4. :vertical  
  5. //vertical伪类适用于任何垂直方向的滚动条  
  6.   
  7. :decrement  
  8. //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮  
  9.   
  10. :increment  
  11. //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮  
  12.   
  13. :start  
  14. //start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面  
  15.   
  16. :end  
  17. //end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面  
  18.   
  19. :double-button  
  20. //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。  
  21.   
  22. :single-button  
  23. //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。  
  24.   
  25. :no-button  
  26. no-button伪类表示轨道结束的位置没有按钮。  
  27.   
  28. :corner-present  
  29. //corner-present伪类表示滚动条的角落是否存在。  
  30.   
  31. :window-inactive  
  32. //适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。  
  33.   
  34. ::-webkit-scrollbar-track-piece:start {  
  35. /*滚动条上半边或左半边*/  
  36. }  
  37.   
  38. ::-webkit-scrollbar-thumb:window-inactive {  
  39. /*当焦点不在当前区域滑块的状态*/  
  40. }  
  41.   
  42. ::-webkit-scrollbar-button:horizontal:decrement:hover {  
  43. /*当鼠标在水平滚动条下面的按钮上的状态*/  
  44. }  
原文地址:http://www.xuanfengge.com/css3-webkit-scrollbar.html
来自 http://blog.csdn.net/hanshileiai/article/details/40398177


css怎么设置div滚动条的样式,可改变大小的

七殿哥哥2352 | 浏览 22479 次  2013-12-21 10:00
2015-07-12 09:32最佳答案
 
::-webkit-scrollbar{width:14px;}
::-webkit-scrollbar-track{background-color:#bee1eb;}
::-webkit-scrollbar-thumb{background-color:#00aff0;}
::-webkit-scrollbar-thumb:hover {background-color:#9c3}
::-webkit-scrollbar-thumb:active {background-color:#00aff0}

这段代码放倒CSS文件里去,宽度颜色自己修改,且只在webkit内核浏览器下才生效,就是谷歌浏览器的内核。

来自  https://zhidao.baidu.com/question/751454776548850204.html?skiptype=2


普通分类: