随着Web2.0潮流的大力推动，越来越多的网站开始注重美观程度。而许多美观的效果离不开CSS的实现。在网页设计中经常会使用到滚动条，然而默认的滚动条样式比较单调，不能满足不同网站风格的要求。考虑到用户体验，很多网站设计师希望能够根据自己的需要来设计滚动条样式。下面就来讨论一下如何实现自定义样式的滚动条CSS效果。

一、原有的滚动条样式

滚动条是指出现在网页右侧或底部的那个可以通过滑块来拖动的工具，用于网页内容的滚动。下面是一些常见的原有滚动条样式：


可以发现原有的滚动条样式多数是单调、无色调的，缺少个性化，不能很好地体现网站的风格。因此，设计师们需要运用CSS样式语言中的属性来实现自定义的滚动条效果。

二、CSS样式语言

CSS（Cascading Style Sheets）样式语言是一个用来设置html、xhtml等文档页面以及用户界面的样式规范的计算机语言。这种语言是在HTML（Hyper Text Markup Language）或XHTML（EXtensible Hyper Text Markup Language）等文件中使用的一种样式表语言，可以为它们添加样式，同时CSS也是一种用于网页设计和其他文档的样式表语言。

CSS具有可读性高、易于维护、文章容易呈现多样化等优点，详尽的样式支持可以使开发人员更轻松地创建用户友好的网站布局样式。当然，它也有一些弊端，即有些属性在不同浏览器下的效果会有所不同，这需要开发人员需要按照不同的浏览器去实现一些兼容性处理，但这并不能阻止人们对CSS的使用和热爱。

三、如何实现自定义样式的滚动条CSS效果

为了实现自定义样式滚动条的效果，可以在CSS属性中使用“::-webkit-scrollbar”来定义自己的样式。下面是一个完整的CSS样式定义：

```

/*滚动条整体样式*/

::-webkit-scrollbar{

width: 8px; /*高宽分别对应横竖滚动条的尺寸*/

height: 8px;

}

/*定义滚动条的轨道样式*/

::-webkit-scrollbar-track{

background-color: #fff; /*滚动条两端的留白颜色*/

}

/*定义滑块的主体样式*/

::-webkit-scrollbar-thumb{

border-radius: 0; /*滑块圆角*/

background-color: #999; /*滑块颜色*/

background-image: none; /*滑块图片*/

}

/*当鼠标悬停在滚动条上时的样式*/

::-webkit-scrollbar-thumb:hover{

background-color: #666; /*滑块颜色*/

}

```

这个CSS代码段对滚动条的宽度、高度、背景颜色以及滚动条的滑块进行了定义和显示。其中，-webkit是WebKit内核浏览器特有的，如果需要兼容性的话可以改成这样：

```

/* IE和FireFox的滚动条样式 */

/*滚动条整体样式*/

::-webkit-scrollbar {

width: 10px; /*滚动条宽度*/

height: 10px; /*滚动条高度*/

}

::-webkit-scrollbar-track-piece{ /*滚动条轨道*/

background-color:#e5e5e5; /*轨道颜色*/

-webkit-border-radius:5px; /*边角圆度*/

}

::-webkit-scrollbar-thumb { /*滑块*/

background-color:#777; /*滑块颜色*/

-webkit-border-radius:5px; /*边角圆度*/

border: 1px solid #555; /*边框样式*/

}

::-webkit-scrollbar-thumb:hover {/*鼠标悬浮在滑块上面的样式*/

background-color:#444; /*滑块颜色*/

}

```

四、自定义滚动条的颜色和样式

下面我们就来讲一下如何自定义滚动条的颜色和样式，以满足网页设计师的要求。

（1）轨道和轨道衬底的颜色

轨道是指滚动条的主体部分，而轨道衬底是指滚动条的留白区域。这里我们可以通过“background-color”来设置它们的颜色。

```

/* 风景留白区域的样式 */

::-webkit-scrollbar-track{

background-color: #fff;

}

/* 风景区域的滑块的颜色 */

::-webkit-scrollbar-thumb{

background-color: #999;

}

```

（2）滑块和滑块背景的颜色

滑块是指滚动条的拖动按钮，而滑块背景是指滑块的背景部分。我们可以通过“background-color”来设置它们的颜色。

```

/* 风景区域的滑块的颜色 */

::-webkit-scrollbar-thumb{

background-color: #999;

}

/*滑块背景颜色*/

::-webkit-scrollbar-thumb:horizontal{

background-color: #52bab3;

}

```

（3）滑块的形状

我们可以通过“border-radius”来设置滑块的圆角形状。

```

/*滑块的形状*/

::-webkit-scrollbar-thumb{

border-radius: 5px;

}

```

（4）滑块背景的形状

我们可以通过“border-radius”来设置滑块背景的圆角形状。

```

/*滑块背景的形状*/

::-webkit-scrollbar-thumb:horizontal{

border-radius: 5px;

}

```

（5）滑块和滑块背景的图片

我们可以通过“background-image”来设置滑块和滑块背景的图片。

```

/* 进度条中滑块的图片 */

::-webkit-scrollbar-thumb:horizontal{

background-image: url(../images/scrollBar.png);

}

/* 滑块背景图片 */

::-webkit-scrollbar-thumb:horizontal{

background-image: url(../images/scrollBarBg.png);

```

（6）滑块在鼠标悬浮时的样式

我们可以通过“:hover”来设置滑块在鼠标悬浮时的样式。

```

/*鼠标悬浮在滑块上面的样式*/

::webkit-scrollbar-thumb:hover {

background-color:#888; /*滑块颜色*/

}

```

通过以上的讲解，我们不难发现，自定义滚动条在实现上不是很难，简单的代码样式调整就可以轻松实现，实现自定义滚动条后，网站的风格将更加个性化。经常关注CSS的设计师不妨多花些时间研究滚动条的实现，利用个性化滚动条去增加网页的美观程度。