有一说一 系统默认的滚动条确实不是很美观

那么我就来带着大家修改一下他的样式

::-webkit-scrollbar 设置整个滚动条的样式 一般用于设置宽度

你要跟什么元素加 就 元素::-webkit-scrollbar
例如你想 给body 就 body::-webkit-scrollbar

::-webkit-scrollbar-track 设置滚动槽样式 用法同上

::-webkit-scrollbar-thumb 设置滚动条滑块样式 用法同上

这里 我们要给一个 class 类名叫 frame的元素加

<style>
	.frame::-webkit-scrollbar-track {
	    background: #d3dce6;
	}
	
	.frame::-webkit-scrollbar {
	    width: 6px;
	}
	
	.frame::-webkit-scrollbar-thumb {
		background: #99a9bf;
		border-radius: 20px;
	}
</style>

这样就美观了很多