`
dyyaries
  • 浏览: 80971 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

转载-滚动条的CSS样式

    博客分类:
  • Web
阅读更多
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,总之,可以尽情发挥了。

本文转自:http://www.qianduan.net/css-custom-scroll-bar-style.html
分享到:
评论

相关推荐

    Qt悬浮滚动条-滚动条样式

    在“Qt悬浮滚动条-滚动条样式”这个主题中,我们主要探讨如何创建一个不占用控件实际宽高的滚动条,同时增强其视觉效果和交互体验。 首先,让我们了解滚动条的基本概念。Qt中的QScrollBar类提供了水平和垂直滚动条...

    IE滚动条 CSS样式

    在网页设计中,为了提升用户体验,设计师们常常会利用CSS(Cascading Style Sheets)来定制浏览器的滚动条样式。特别是在Internet Explorer(IE)浏览器中,由于其对滚动条样式的特殊处理,需要特别的技巧来进行...

    滚动条css精美样式

    "滚动条css精美样式"的主题正是关注如何通过CSS来定制滚动条,使其与网页设计更加协调,提升用户体验。 CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表...

    div滚动条样式一览-div+css设计网

    在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、滚动条的基本样式 在默认情况下,浏览器提供了一套统一的滚动条样式。然而,通过CSS3,我们可以自定义...

    css美化滚动条

    因此,利用CSS(层叠样式表)来美化滚动条,使之与网站的视觉效果统一,是提升用户体验的重要手段。本文将详细介绍如何通过CSS来自定义和美化滚动条。 一、CSS滚动条的基本结构 滚动条由三部分组成:轨道...

    视频播放 ---滚动条的设置

    2. **自定义样式**: `jscroll.js`默认提供了一些基本样式,但为了适应视频播放器的界面,你可能需要通过CSS来覆盖或扩展这些样式,比如改变滚动条的颜色、宽度、鼠标悬停效果等。 ```css .video-timeline::-webkit-...

    bootstrap-table-fixed-columns(css,js)

    CSS(层叠样式表)是用于描述网页及应用程序界面外观和表现的样式语言,通过修改这个文件,开发者可以自定义固定列的视觉效果,如边框、背景色、字体样式等。 `bootstrap-table-fixed-columns.js`则是JavaScript...

    e语言-易语言CSS样式滚动条

    在本案例中,“易语言CSS样式滚动条”是指使用易语言来实现对滚动条外观的自定义,通过应用CSS(层叠样式表)样式来改变滚动条的视觉效果。CSS样式滚动条的实现通常是通过JavaScript或者特定的库来完成的,而在...

    CssScrollbar-滚动条样式制作

    "CssScrollbar-滚动条样式制作"这个主题正是关注如何利用CSS来个性化网页的滚动条,提升用户体验。 在默认情况下,滚动条具有操作系统自身的样式,这可能与网页的整体设计不协调。通过CSS,我们可以改变滚动条的...

    滚动条css代码生成器

    滚动条CSS代码生成器是一种工具,它允许开发者自定义网页中的滚动条样式,使其符合网站的整体设计风格。在网页设计中,滚动条虽然通常被忽视,但作为用户体验的一部分,其外观和交互方式同样重要,特别是在现代网页...

    textArea滚动条样式

    首先,我们需要理解CSS3提供了对滚动条样式的一些控制,如`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等伪元素,但这些样式只在Webkit内核的浏览器(如Chrome、Safari)中有效。对于Firefox、IE/Edge等非...

    四种漂亮的滚动条样式

    CSS(层叠样式表)提供了一种方法,允许开发者自定义滚动条的样式,使其更加符合整体设计风格。本文将探讨如何使用CSS来设置漂亮的滚动条样式。 首先,我们需要了解CSS中用于控制滚动条样式的属性。主要有以下几类...

    滚动条样式 html css

    一、CSS3 自定义滚动条样式 在 CSS3 中,可以使用伪元素 `::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`、`::-webkit-scrollbar-track` 和 `::-webkit-scrollbar-corner` 来分别定义滚动条的宽度、滚动条滑块...

    文件滚动-----css

    在网页设计中,"文件滚动"通常指的是网页内容在超出屏幕范围时的显示方式,而CSS(Cascading Style Sheets)是用于控制网页元素样式的关键技术。本篇将深入探讨如何利用CSS实现文件滚动效果,以及相关的技巧和知识点...

    asp.net 垂直滚动条Css样式,Js实现源码

    本资源提供了一种方法,通过CSS样式和JavaScript实现ASP.NET页面中的垂直滚动条美化。下面将详细阐述这个主题。 首先,CSS(层叠样式表)是用于控制网页元素外观的关键工具。在ASP.NET中,我们可以利用CSS来改变...

    javascript经典特效---滚动条闪动的控制.rar

    5. **浏览器兼容性**:不同浏览器对滚动条样式的支持程度不同,特别是IE和其他现代浏览器之间。因此,在编写代码时,需要考虑使用条件语句或polyfill库来确保在各种浏览器中的兼容性。 6. **优化性能**:频繁的DOM...

    修改火狐滚动条样式(纯css).html

    修改火狐滚动条样式demo,纯css修改火狐默认的滚动条样式

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    然而,CSS3引入了新的特性和伪元素,使得我们可以进一步定制滚动条的样式。这些特性通常适用于Webkit内核的浏览器,如Chrome和Safari,但也可以通过前缀`-moz-`和`-ms-`来支持Firefox和Internet Explorer。 以下是...

    易语言CSS样式滚动条

    CSS样式滚动条允许开发者自定义浏览器中滚动条的外观,使其与网页设计保持一致,提升用户体验。 首先,我们要理解CSS样式滚动条的基本概念。CSS(层叠样式表)是用于描述网页及应用程序用户界面外观和表现的样式...

Global site tag (gtag.js) - Google Analytics