自定义浏览器横向滚动条

自定义浏览器滚动条样式

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中滚动条样式的控制,你可以查看如下的图片:

在Win8下面,有一部分样式起着相同的作用。估计是因为在Win8中扁平化的界面设计而重新定义了系统中的滚动条!

以下是Win8下的滚动条样式,并罗列出了CSS支持的情况:

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

  • 关于 scrollbar-track-colorscrollbar-face-colorscrollbar-base-color。直接看英语单词,你就能明白 scrollbar-base-color 是一个备用颜色,只要前两者未设置时,它就开始起作用了。但是你得注意,当 scrollbar- base-color 用来作 scrollbar-track-color 功能来用时,你会发现,实际颜色与设定的颜色要淡一点。不信你可以这样试试:只设置一下 scrollbar-base-color 看看滚动条的效果。
  • 关于 scrollbar-dark-shadow-color 属性,经过测试发现 Win8下的IE10,IE11滚动条并没有改变。
  • Win8下的滚动条中,上箭头和下箭头后面的背景颜色都已经从 scrollbar-face-color 中脱离出来了,从属于 scrollbar-track-color 属性控制。

IE浏览器滚动条自定义功能并不是很强,只能控制显示各个部分的颜色而已,像宽度,结构等都无法控制。

FireFox浏览器

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

webkit内核浏览器

在所有浏览器中,滚动条可定制性最强的当属webkit内核的浏览器了。

1
2
3
4
5
6
7
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-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-corner边角
::-webkit-resizer定义右下角拖动块的样式

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

更多伪类请参考

伪类描述
:horizontal选择水平方向滚动条
:vertical选择竖直方向滚动条
:decrement应用于按钮和内层轨道,用来指示按钮或者内层轨道是否会减小视窗的位置
:increment用来指示按钮或内层轨道是否会增大视窗的位置
:start应用于按钮和滑块。用来定义对象是否放到滑块的前面
:end标识对象是否放到滑块的后面
:double-button用于按钮和内层轨道,判断一个按钮是否是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮
:single-button对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一端。对内层轨道来说,它表示内层轨道是否紧靠一个single-button
:no-button用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,如:滚动条两端没有按钮的时候
:corner-present用于所有滚动条轨道,指示滚动条圆角是否显示
:window-inactive用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

另外,:enabled:disabled:hover、 和 :active 等伪类同样在滚动条中适用。

jQuery 插件

为了一致的用户体验,有时我们就不得不放弃使用部分浏览器提供的CSS接口来定制滚动条,转而寻求更佳的替代方案。其中一种方案是使用jQuery插件 jquery-custom-content-scroller

判别鼠标滚动方向

我们应该都见过这种情景,用鼠标滚轮实现某个表单内的数字向上滚动则增加,向下滚动则减少的操作,这种效果是通过对鼠标滚轮的事件监听来实现的。因为不同的浏览器有不同的滚轮事件,主要有两种,onmousewheel(Firefox不支持)和 DOMMouseScroll(只有Firefox支持)。

另外判断滚轮向上或向下滚动在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用 detail,其余四类使用 wheelDelta

detail 只取 ±3,其中正数表示向下滚动,负数表示向上滚动wheelDelta 在 IE 中取 ±120,在 webkit 内核浏览器中取 ±150,其中正数表示向上滚动,负数表示向下滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var scrollFunc = function (e) {
e = e || window.event;
`如果你使用了 jQuery 插件,则需要通过 e.originalEvent.wheelDelta 或 e.originalEvent.detail来访问`
if (e.wheelDelta) { // 非 Firefox 浏览器
if (e.wheelDelta > 0) {
alert("滑轮向上滚动");
}
if (e.wheelDelta < 0) {
alert("滑轮向下滚动");
}
} else if (e.detail) { // Firefox 浏览器
if (e.detail < 0) {
alert("滑轮向上滚动");
}
if (e.detail > 0) {
alert("滑轮向下滚动");
}
}
}
// 给页面绑定滑轮滚动事件
if (document.addEventListener) {// Firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
// 滚动滑轮触发scrollFunc方法 // IE 谷歌
window.onmousewheel = document.onmousewheel = scrollFunc;

參考

自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)