css自定义滚动条样式

首先了解控制滚动条样式的几个css属性，如下：

::-webkit-scrollbar 控制滚动条整体的样式;
::-webkit-scrollbar-thumb 控制滑块部分样式;
::-webkit-scrollbar-track 控制轨道部分样式;
::-webkit-scrollbar-button 滚动条的轨道的两端按钮
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
简洁版

全局修改滚动条样式

 ::-webkit-scrollbar{
 	background:red;
 }

给某一个div添加滚动条样式

<div class="demo" style="overflow-x:auto;with:auto;"></div>

<style>
	.demo::-webkit-scrollbar{
		background:red;
	}
	.demo::-webkit-thumb  {
		background: #898989;
	}
</style>

如果要隐藏滚动条可以设置如下：

<div class="demo" style="overflow-x:auto;with:auto;"></div>

<style>
    //这种方式用在全局，在局部可以使用display:block;显示局部div的滚动条
	.demo::-webkit-scrollbar{
		display:none;
	}
	或者
	//这种方式用在全局，将覆盖局部div的滚动条，局部滚动条不可显示
	.demo::-webkit-scrollbar{
		width:0;
	}
</style>