滚动条样式修改

需求：项目中很多页面会碰到滚动条，但是默认滚动条能用是能用，但是不满足客户需求，需要对滚动条样式进行修改，如下图所示：

左边为传统滚动条，右边为修改样式后的滚动条

 怎样显示默认滚动条应该都知道是怎么回事吧，当内容溢出外部盒子时，便会自动生成默认滚动条。

例子：

//html
		<ul class="test">
			<li>1111111111111111111111111111111111111111111</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
		</ul>


//css
<style>
	.test {
	  width   : 100px;
	  height  : 200px;
	  overflow: auto;
	}
</style>

 接下来就是设置默认滚动条的样式：

	  ::-webkit-scrollbar {
	  /*滚动条整体样式*/
	  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
	  height: 10px;
	  }
	  ::-webkit-scrollbar-thumb {
	  /*滚动条里面小方块*/
	  border-radius: 10px;
	  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
	  background   : #535353;
	  }
	  ::-webkit-scrollbar-track {
	  /*滚动条里面轨道*/
	  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
	  border-radius: 10px;
	  background   : #ededed;
	  }

::-webkit-scrollbar 中的高度设置的时横向滚动条的高，宽设置的时纵向滚动条的宽，并不会冲突，可以自己敲个例子试下。

::-webkit-scrollbar-thumb 设置的时滚动条中滑动块的样式，设置圆角让小方块变为圆角矩形使样式更好看一些，这里我是设置了背景色和阴影，当然能设置背景色肯定要试下图片的嘛，事实证明，图片也是可以的，只不过选择合适的图片很重要。我选的不是很好看~（这里废话有点多）

 ::-webkit-scrollbar-track 这个时滑块的轨道设置，设置和滑块的差不多。

上面就是全局的设置，如果是单独针对某一模块的设置，在前面加上模块的类名即可，如：

.test-1::-webkit-scrollbar{...}