css 设置滚动条的默认样式

参考链接：https://blog.csdn.net/zh_rey/article/details/72473284 

                  https://blog.csdn.net/messicr7/article/details/70211820

1.css样式

<style>
	.box {
		width: 300px;
		height: 200px;
		overflow: scroll;
	}
	/*定义滚动条宽高  背景色*/
	.box::-webkit-scrollbar {
		width: 17px;
		height: 17px;
		background-color: #181e26;
	}
	/*定义滚动条轨道 内阴影+圆角*/
	
	.box::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background: #fff;
	}
	/*定义滑块 内阴影+圆角*/
	
	.box::-webkit-scrollbar-thumb {
		border-radius: 10px;
		
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);				
		background: url(scroll.png) no-repeat center center;
		background-color: #313f51;
	}
	
	.box::-webkit-scrollbar-thumb:hover {
		border-radius: 10px;
	
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		
		background-color: #313f51;
}
</style>

2.dom元素

<div class="box">
			喜欢温文淡雅的语句，喜欢浓香怡人的杯茗，喜欢安然恬静的微笑，喜欢杨柳拂面的春风，喜欢天真烂漫的童趣，喜欢漫无边际的遐思，喜欢不急不迫的行走，喜欢海阔天高的旅行，喜欢浅尝辄止的爱情，喜欢清淡如水的友情，喜欢赏心悦目的生活，喜欢美轮美奂的人生。 喜欢温文淡雅的语句，喜欢浓香怡人的杯茗，喜欢安然恬静的微笑，喜欢杨柳拂面的春风，喜欢天真烂漫的童趣，喜欢漫无边际的遐思，喜欢不急不迫的行走，喜欢海阔天高的旅行，喜欢浅尝辄止的爱情，喜欢清淡如水的友情，喜欢赏心悦目的生活，喜欢美轮美奂的人生。
</div>