相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但这只能避免和无法解决的问题。,我最近在这个项目中遇到过。,总结一下。。自然,兼容所有浏览器的滚动条样式目前是不存在的。

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

大概就是这样。,还可以定义光标来定义滚动条的鼠标手势。。

这边,很长一段时间,危险是一个基于Flash的可视化工具。,简单易用:

选择CSS选项自动生成CSS样式。,这边没有更多的介绍。。嗯,谢谢你的推荐。。

webkit的自定义滚动条样式

yes,这就是我今天想要关注的。。

您可以从前一部分的样式名称中看到。,IE只能定义属性,如相关部分的颜色。,这太不灵活了。。

WebKIT最近实现了对滚动条的支持。,让我们来看一个简单的演示。:

不外,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 – 水平拟似类别应用于水平滚动条。
  • :vertical – 垂直拟似类别应用于垂直滚动条。
  • :decrement – 递减拟似类别应用于按钮和内部轨道(轨道) 一件)。它用来指示按钮或内轨是否会降低位置。,在垂直滚动条之上。,水平滚动条左侧。)
  • :increment – 增量拟似类别与减量类似。,它用于指示按钮或内轨道是否会增加P。,垂直滚动条的底部和水平S的右侧。。)
  • :start – 启动拟似类别也适用于按钮和滑块。。它用于定义对象是否放置在滑块前。。
  • :end – 类似于启动拟似类别,标识对象是否放置在滑块后面。。
  • 双按钮 – 拟似类别用于按钮和内部轨道。。它用于确定按钮是否在T中的一对按钮中放置。。对于内轨道,它指示内轨是否接近一对按钮。。
  • :single-button – 类似双按钮拟似类别。对于按钮,它用于确定按钮在SEC中是否与自身无关。。对于内轨道,它指示内轨是否接近单个按钮。。
  • :no-button – 内轨,指示内轨是否应该滚动到滚动的终端。,比方,滚动条的末尾没有按钮。。
  • :corner-present – 对于所有滚动条轨道,指示是否显示滚动条圆角。。
  • :window-inactive – 对于所有滚动条轨道,指示是否应用到卷轴B的页容器(元素)。。(在最新版本的WebKIT中),拟似类别也可以应用于::选择假元。。WebKIT团队计划扩展它并将其驱动到标准的伪C中。

别的,:enabled、:disabled、:hover 和 :active 这样的拟似类别也可以在滚动条中使用。。

关于具体演示,这已经不复存在了。,网上有很多演示供参考。,比方,这是WebKIT高级职员。,在具体的在线项目中也有现成的例子。,比方,QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。

值得一提的是,WebKIT的拟似类别和假元实现是非常强大的。,虽然有很多种类,但是我们可以将滚动条定义为页面元素。,您还可以使用一些高级CSS3属性。,诸如,逐渐变化、圆角、RGBa等,自然,有些地方也可以使用图片。,然后图片也可以转换为Base64。,简单地说,你可以用心去玩。。

PS的中间部分的翻译不到位。,欢迎指正。

参考文章:

Leave a Comment

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