浏览器滚动条样式还可以改变，你知道吗？
有时候，我们是不是觉得浏览器默认的滚动条很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); /*自定义个性鼠标*/ }
