css笔记---自定义页面滚动条

自定义页面滚动条：

/* 设置滚动条的样式 */::-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(0,0,0,0.1);-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive {background:rgba(255,0,0,0.4);}

代码效果图：

详解：

滚动条的主要属性--

::-webkit-scrollbar 滚动条整体部分--①
::-webkit-scrollbar-button 滚动条两端的按钮--②
::-webkit-scrollbar-track 外层轨道--③
::-webkit-scrollbar-track-piece 内层滚动槽--④
::-webkit-scrollbar-thumb 滚动的滑块--⑤
::-webkit-scrollbar-corner 边角--⑥
::-webkit-resizer 定义右下角拖动块的样式--⑦

   分别与下图数字对应