css更改滚动条样式

常用属性如下

::-webkit-scrollbar：指滚动条整体部分，它的属性有width,height,background等
::-webkit-scrollbar-button ： 指滚动条两边的按钮。当不需要时可以用display:none将其隐藏
::-webkit-scrollbar-track ：指外层轨道部分，当不需要时可以用display:none将其隐藏，也可以添加你想要的颜色
::-webkit-scrollbar-track-piece ：指内层轨道部分，即滚动条中间的部分
::-webkit-scrollbar-thumb ： 指滚动条里面可以拖动的部分，也就是滑块
::-webkit-scrollbar-corner ：指边角部分
::-webkit-resizer ：他用来定义右下角滑块的样式

常用的是滚动条整体部分（-webkit-scrollbar），滑块（-webkit-scrollbar-thumb）以及外轨道（ -webkit-scrollbar-track）三部分。

实例代码

	/* 设置滚动条的样式 */
    ::-webkit-scrollbar {
    width: 12px;
	}
	/* 滚动槽 */
	 ::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 10px;
	}
	/* 滚动条滑块 */
	 ::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(69, 26, 187, 0.4);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}
	/* 滚动条滑块 window-inactive非激活窗口 该特性是非标准的，请尽量不要在生产环境中使用它！*/
    ::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(69, 26, 187, 0.1);
	}

修改单个dom元素可以再伪元素的加一层选择器来表示一类或唯一。

#domid ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 0, 0, 0.4);
}