css滚动条样式

滚动条样式

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

要有滚动条出现要给height和overflow
overflow-y: auto; // 要给auto
height: 200px;

body {
    overFlow-y:scroll;
	overFlow-x:hidden;
}
body::-webkit-scrollbar { /*外层轨道*/
	// 开始设置样式
    width:7px; 
    height:2px;  
    border-radius:10px;
}
body::-webkit-scrollbar-thumb{ /*内层轨道*/
	// 开始设置样式
    display:block; 
    width:7px; 
    margin:0 auto; 
    border-radius: 10px; 
    background:#c9cdd2; 
    border:1px solid #fff;
}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar