有时候，我们是不是觉得浏览器默认的滚动条很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更改样式。
html部分
<style>
#scrollbar {
width:300px;
height:300px;
overflow:auto;
float: left;
}
#scrollbar div {
width:800px;
height:2000px;
}
</style>
<body>
<div id='scrollbar'>
<div ></div>
</div>
</body>
css样式
<style>
#scrollbar::-webkit-scrollbar { 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
width:12px;
height:12px;
}
#scrollbar::-webkit-scrollbar-button { 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
width:12px;
height:12px;
}
#scrollbar::-webkit-scrollbar-track { 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
background: #232428;
border-radius: 20px;
}
#scrollbar::-webkit-scrollbar-track-piece { 内层轨道，滚动条中间部分（除去）。
background: #232428;
border-radius: 20px;
}
#scrollbar::-webkit-scrollbar-thumb { 滚动条里面可以拖动的那部分
background:#85868B;
border-radius:50px;
}
#scrollbar::-webkit-scrollbar-corner { 边角
background:#fff;
}
#scrollbar::-webkit-scrollbar-resizer { 定义右下角拖动块的样式
background:#fff;
}
</style>
这里给大家做了个图,方便大家理解：
自定义IE浏览器滚动条样式
IE浏览器，就比较简单了，直接定义整个页面的滚动条 ，但IE浏览器只能更换颜色不能设置背景颜色。
body {
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); /*自定义个性鼠标*/
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。