CSS设置滚动条样式（兼容IE）
废话不多说，直接上demo，最下面有详细注释。
1、这是在webkit浏览器下显示的样式。
（个人比较喜欢简约点的）
2、在IE浏览器下显示的样式（为了区分所以样式写的不一样，我没找到IE下设置滚动条宽高的方法）
下面是代码：
&div id='scroll'&
&p&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ex quia ab aliquid facere architecto culpa dolorum fugit corrupti harum accusantium quisquam inventore et magnam itaque minima hic! Impedit error.&/p&
&p&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt quia ipsam totam tenetur maxime repellendus possimus debitis molestiae velit vel fugiat ullam excepturi est quisquam quo fugit culpa amet.&/p&
&p&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur facilis ipsam iste repellat sint numquam explicabo voluptatum voluptate corporis fugit adipisci qui exercitationem corrupti debitis tempore omnis maxime at quidem!&/p&
&p&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto voluptatem dolores ab dolorem est itaque ut sit deserunt qui laudantium eaque vitae perspiciatis amet quasi unde inventore dolor quis. Natus!&/p&
&p&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quia doloremque blanditiis quas unde nostrum a voluptatibus quam perspiciatis non quaerat enim neque quos rerum quo dolor expedita error deserunt!&/p&
height:200
margin-bottom: 20
#scroll div{
height:400
#scroll::-webkit-scrollbar{/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
#scroll::-webkit-scrollbar-button{/*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
background:#74D334;
#scroll::-webkit-scrollbar-track{/*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
background:#FF66D5;
#scroll::-webkit-scrollbar-track-piece{/*内层轨道，滚动条中间部分（位置4）*/
background:#FF66D5;
#scroll::-webkit-scrollbar-thumb{/*滚动条里面可以拖动的那部分（位置5）*/
background:#FFA711;
border-radius:4
#scroll::-webkit-scrollbar-corner {/*边角（位置6）*/
background:#82AFFF;
#scroll::-webkit-scrollbar-resizer
{/*定义右下角拖动块的样式（位置7）*/
background:#FF0BEE;
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样式直接默认就行)
#scroll-2{
height:200
margin-bottom: 20
#scroll-2 div{
height:400
#scroll-2::-webkit-scrollbar{
#scroll-2::-webkit-scrollbar-track{
background: #f6f6f6;
border-radius:2
#scroll-2::-webkit-scrollbar-thumb{
background: #
border-radius:2
#scroll-2::-webkit-scrollbar-thumb:hover{
background: #747474;
#scroll-2::-webkit-scrollbar-corner{
background: #f6f6f6;
webkit浏览器滚动条样式设置位置参考如下：IE浏览器滚动条样式设置位置参考如下图
扫码向博主提问
非学，无以致疑；非问，无以广识
擅长领域：
JavaScript
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！1.3k 人阅读
标签：至少1个，最多5个
有时候，我们是不是觉得浏览器默认的滚动条很low， 那么浏览器滚动条样式能否改变呢，答案是肯定的，今天就给大家分享一下怎么改变浏览器的默认滚动条，让我们的页面更加炫酷。
在次之前，我们先来了解一下滚动条产生的原因，通俗的来讲就是内容超出容器就会出现滚动条。
verflow介绍
&h5&定义：overflow 属性指定当它溢出其块级容器时,是否剪辑内容，渲染滚动条或显示内容。属性值
overflow:visible
//默认值。内容不会被修剪，超出内容会显示在元素框之外
overflow:hidden
//内容会被修剪。超出内容被隐藏
overflow:scroll
//内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow:auto
//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
overflow:inherit
//规定从该父元素继承overflow属性的值`
注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。当overflow设为除默认值（visible）以外的值时，将会创建一个会 块级式化上下文 （清除浮动的一种方式），更多可查看深入理解BFC和Margin Collapse
下面直接进入教程，以Google浏览器为例：
webkit内核的浏览器滚动条样式
首先给两个div，两个div是父子关系，里面的div宽高比外面的宽高值大，再加上overflow：hidd属性模拟出现滚动条效果，然后进行css更改样式。
#scrollbar {
height:300
#scrollbar div {
height:2000
&div id='scrollbar'&
&div &&/div&
#scrollbar::-webkit-scrollbar
滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
#scrollbar::-webkit-scrollbar-button
滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
#scrollbar::-webkit-scrollbar-track
外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
background: #232428;
border-radius: 20
#scrollbar::-webkit-scrollbar-track-piece {
内层轨道，滚动条中间部分（除去）。
background: #232428;
border-radius: 20
#scrollbar::-webkit-scrollbar-thumb
滚动条里面可以拖动的那部分
background:#85868B;
border-radius:50
#scrollbar::-webkit-scrollbar-corner
background:#
#scrollbar::-webkit-scrollbar-resizer
定义右下角拖动块的样式
background:#
这里给大家做了个图,方便大家理解：
自定义IE浏览器滚动条样式
IE浏览器，就比较简单了，直接定义整个页面的滚动条 ，但IE浏览器只能更换颜色不能设置背景颜色。
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;
/*滚动条的基本颜色*/
Cursor:url(mouse.cur);
/*自定义个性鼠标*/
5 收藏&&|&&47
你可能感兴趣的文章
over－flow 在此之前
over－flow
在n年前就知道了，上个世纪就有这个东西了
在n年前就知道了，上个世纪就有这个东西了
很早的东西，因为兼容性极差，除了在一些adminLTE中见到，其他地方几乎没有用到。
很早的东西，因为兼容性极差，除了在一些adminLTE中见到，其他地方几乎没有用到。
你可能感兴趣的文章
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。CSS3自定义滚动条样式 -webkit-scrollbar
有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？
webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。
来看看这2个滚动条demo：、
滚动条组成
这里就不贴出详细代码了，demo里面可以通过查看源码寻找具体样式的设置。来看看demo2中第二个滚动条的样式
定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？
伪类大家应该很熟悉:link,:focus,:hover，此外中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。
CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“::selection”。两个“：：”和一个“：”在css3中主要用来区分伪类和伪元素。
webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。
任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂，具体怎么写可以看第一个demo，那里也有注释。
原文地址：http://www.xuanfengge.com/css3-webkit-scrollbar.html
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！CSS —— 自定义浏览器滚动条的样式，打造属于你的滚动条风格
前段时间，到网上找素材时，看到了一个很个性的滚动条式，打开Chrome的调试工具看了一下，发现不是用JavaScript来模拟实现的，觉得有必要折腾一下。于是在各大浏览器中对比了一下，发现只用Chrome适用，也就是说这个用的是Chrome的私有CSS属性。便百之谷之后，发现原来不仅仅只用Chrome，其它的浏览器在不同程度上支持自定义滚动条样式的。下面是我不断测试的结果，若有错误或不全，请在评论里面给出，我会立马更正；若有更好的方案，你可以留言，让大家都开开眼界。。。。。。
自定义IE浏览器滚动条样式
追溯浏览器对滚动条的自定义，恐怕最早的就是IE浏览器了（好像最开始支持的版本是IE5.5）。下面列出了多个版本的支持性况：
滚动条样式
支持浏览器版本
scrollbar-3dlight-color
IE特有属性
设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-highlight-color
IE特有属性
设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-face-color
IE特有属性
设置滚动框和滚动条箭头的颜色
scrollbar-arrow-color
IE特有属性
设置滚动条箭头的颜色
scrollbar-shadow-color
IE特有属性
设置滚动框的和滚动条箭头右下边缘的颜色
scrollbar-dark-shadow-color
IE特有属性
设置滚动条槽的颜色
scrollbar-base-color
IE特有属性
设置滚动条主要构成部分的颜色
scrollbar-track-color
IE特有属性
设置滚动条轨迹组成部分的颜色
为了有助于理解IE中滚动条样式的控制，你可以查看如下的图片：
以上所写的几个四个CSS属性，足以控制Win 8系统下，IE浏览器的滚动条样式了。但经过测试，发现，其它的四个属性仍然支持（主要是在以上几个属性空缺时，就会体现其作用）。具体如下：
关于scrollbar-track-color，scrollbar-face-color与scrollbar-base-color。直接看英语单词，你就也许能明白scroll-base-color是一个备用颜色，只要前两者未设置时，它就开始起作用了。但是你得注意，当scrollbar-base-color用来作scrollbar-track-color功能来用时，你会发现，实际颜色与设定的颜色要淡一点。不信你可以这样试试：只设置一下scrollbar-base-color看看滚动条的效果。关于scrollbar-dark-shadow-color属性，通过测试发现Win 8下IE10，IE11滚动条并没有改变。可能是win 8的滚动条重新定义了，导致没有了隐影了吧！（仅个人猜想）通过观察我们发现，Win 8下的滚动条中，上箭头和下箭头后面的背景颜色都已经从scroll-face-color中脱离出来了，从属于scroll-track-color属性控制。感觉IE浏览器滚动条自定制功能并不是很强，只能控制一样显示各个部分的颜色而已，像宽度，结构等都无法控制，要靠出个性点的滚动条，很难！很难！！！
自定义FireFox浏览器滚动条
在网上找了很多关于Firfox自定义浏览器滚动条的方法，发现firefox中却实是不支持的。发现了几篇说可以更改，自已也跟着代码写了几次（不知是我错了还是。。。），发现却是不起作用。以下是一点小的收获：
@-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;
实测以上代码并不起作用。但也可能是我的浏览器的版本不对吧！你可以试试，要是有效的话，你可以把你的FF版本发表在文章评论里面。
下面给两个关于FF滚动条的讨论(你多少web开发者希望FF能够像webkit内核浏览器一样程度的来支持滚动条自定义)：
webkit内核的浏览器滚动条定制
在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市面上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使用webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器······
下面我们来看一下webkit浏览器是如何强大的吧！
::-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-thumb
滚动条里面可以拖动的那部分::-webkit-scrollbar-corner
边角::-webkit-resizer
定义右下角拖动块的样式注意：对以上各个部分定义width,height时。有如下功能：若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。
能过上面的不断的测试。在Chrome中，滚动条中的各个部分和DOM中块级元素是一样的。通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。而{}中的属性，你就像控制一般块级元素一样简单（强大啊）。
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。
对应的源代码如下：
CSS部分代码：
#scroll-1 {
width:200px;
height:200px;
overflow:auto;
#scroll-1 div {
width:400px;
height:400px;
#scroll-1::-webkit-scrollbar {
width:10px;
height:10px;
#scroll-1::-webkit-scrollbar-button
background-color:#FF7677;
#scroll-1::-webkit-scrollbar-track
background:#FF66D5;
#scroll-1::-webkit-scrollbar-track-piece {
background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);
#scroll-1::-webkit-scrollbar-thumb{
background:#FFA711;
border-radius:4px;
#scroll-1::-webkit-scrollbar-corner {
background:#82AFFF;
#scroll-1::-webkit-scrollbar-resizer
background:#FF0BEE;
HTML结构：
id='scroll-1'
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
通过以上，我们几乎就可以来重写网站的滚动条了，但是webkit提供的还有更多的伪类，可以定制更丰富滚动条样式。本文以下内容参考：
:horizontal
horizontal
伪类，主要应用于选择水平方向滚动条。:vertical
vertical伪类主要是应用于选择竖直方向滚动条:decrement
decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。):increment
increment伪类与和decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。):start
start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。:end
类似于start伪类，标识对象是否放到滑块的后面。:double-button
该伪类可以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。:single-button
类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。:no-button
用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。:corner-present
用于所有滚动条轨道，指示滚动条圆角是否显示。:window-inactive
用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)另外，:enabled、:disabled、:hover、和:active等伪类同样在滚动条中适用。
看了这些伪类，怎么也没有明白是什么意思，还是自已得写的试试。实践出真知嘛！你可以击接以下链接到官方演示DEMO（感觉可以学到很多东西的）：
下面我自已尝试着去写的DEMO，不要嫌它太丑就好。
三国平分，终归一统
为了一致的用户体验，有时我们就不得不放弃使用部分浏览器提供的CSS接口来定制滚动条，转而寻求更佳的代替方案。
其中的一中方案是使用jQuery插件，jquery-custom-content-scroller。使用插件的好处是显而易见的，但是坏处也多得去了。要是您想了解jQuery-custom-content-scroller的具体使用方法，请移步到：
下面我就jQuery滚动条插件的使用作一下简单介绍：
第一步：在内容的顶部引入滚动条相应的样式表文件和jquery的库文件，jquery插件jquery.mcustomscrollbar文件。代码如下：
rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" src="jquery.mCustomScrollbar.concat.min.js"
第二步：在要显示滚动条的元素（元素内容中必须要有溢出的块，否则就不会出现滚动条）上面，加入class="content"，然后再加入以下代码：
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
})(jQuery);
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！