200字范文 > 自定义浏览器滚动条样式（兼容chrome和firefox）

自定义浏览器滚动条样式（兼容chrome和firefox）

时间：2018-10-26 19:27:33

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。

以下正文：

问题描述

浏览器默认的滚动条样式太丑了，而且不同的浏览器下滚动条的样式也不一样，为了美观和统一，必须修改滚动条的样式。

有人问，为什么不自己写一个滚动条？

其一，自己写的滚动条效率和兼容性比不上浏览器默认滚动条。

其二，自己写太麻烦了吧，能用默认的为什么不用呢 0.o

问题分析

既然要修改默认滚动条的样式，就需要了解滚动条的样式都有哪些属性可以修改，以及这些属性分别对应了滚动条的哪些部位？

下面有一张图可以很清楚的看到它们的对应关系：

属性描述：

::-webkit-scrollbar//滚动条整体部分::-webkit-scrollbar-button//滚动条两端的按钮::-webkit-scrollbar-track//外层轨道::-webkit-scrollbar-track-piece//内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-thumb//滚动条里面可以拖动的那个::-webkit-scrollbar-corner//边角::-webkit-resizer///定义右下角拖动块的样式

解决方案

于是对于chrome，我们可以这样修改滚动条样式：

/*定义整个滚动条高宽及背景：高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{width:10px;background-color:#F5F5F5;}/*定义滚动条轨道：内阴影+圆角*/::-webkit-scrollbar-track{background-color:#F5F5F5;}/*定义滑块：内阴影+圆角*/::-webkit-scrollbar-thumb{border-radius:10px;background-color:#555;}

一般我们这样设置这几个主要属性就OK了，但是如果你想更详细的css属性，也有：

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

用法如下：

::-webkit-scrollbar-track-piece:start{}::-webkit-scrollbar-thumb:window-inactive{}::-webkit-scrollbar-button:horizontal:decrement:hover{}

兼容性

IE

对于IE，目前只找到修改滚动条各种属性的颜色，未找到修改样式的地方。

具体可修改的颜色如下：

有个表格看的清楚：

代码：

.ie-div{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;/*滚动条的基本颜色*/}

修改后的IE滚动条样式如下：

Firefox

火狐64位目前只提供了部分自定义滚动条的属性：

scrollbar-width：该属性可取值：

scrollbar-width:auto;//默认值scrollbar-width:thin;//比默认滚动条窄scrollbar-width:none;//不显示滚动条，但是仍可以滚动

下面是thin的样式（图一默认，图二thin）：

scrollbar-color：其可填写的值有：

scrollbar-color:auto;//默认值scrollbar-color:dark;scrollbar-color:light;scrollbar-color:redgreen;//第一个滚轮颜色，第二个滚动条背景色

“
其中dark和light并没有实现。

示例代码：

#style-0{scrollbar-width:thin;scrollbar-color:#ccc#eee;}

使用插件或者自己DIY

比较好用的插件：

JQuery Custom Scrollbar[1]

Perfect Scrollbar[2]：只有6K大小。

其它

我看到还有更骚的操作是在界面上套一层div，然后在滚动条的地方挖孔，只显示一部分滚动条出来，然后显示的一部分滚动条就是类似自定义的样式。。。

总结

如果只是修改样式的，IE算是没辙了，但是firefox还有救。

我的折中方式是，把chrome的样式设置和firefox一样。

代码：

/**描述：自定义浏览器滚动条样式。示例：如 my-div 需要使用自定义滚动条，直接如下写法。.my-div{overflow:auto;@import'../../commons/css/custom_scroll.less';}注意：元素需要使用`overflow:hidden `属性。兼容性：兼容chrome和firefox，不兼容IE*/&::-webkit-scrollbar{width:6px;background-color:#eee;}&::-webkit-scrollbar-thumb{background-color:#c1c1c1;&:hover{background-color:#a8a8a8;}&:active{background-color:#787878;}}&{scrollbar-width:thin;scrollbar-color:#c1c1c1#eee;}

如此，chrome和firefox可算长得一样了。