自定义浏览器横向滚动条

自定义浏览器滚动条样式

IE浏览器

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

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

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

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

• 关于 scrollbar-track-color，scrollbar-face-color 与 scrollbar-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代码所管辖的区域对应关系（以上注释中的数字与下图中数字相对应）

更多伪类请参考

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

jQuery 插件

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

判别鼠标滚动方向

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

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

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不支持)