css3实现⾃定义滚动条样式详解
html滚动效果代码在写页⾯的时候有时候滚动条的样式与页⾯风格不统⼀这时候就⽤到了⾃定义滚动条
1、⾸先弄清楚页⾯的滚动条分为哪些部分，在写的时候分为⼏块
定义滚动条的时候先进⾏宏观定义，定义滚动条，然后定义滑块，然后定义滑块的轨道，总之很简单，结构如下
::-webkit-scrollbar  定义了滚动条整体的样式；::-webkit-scrollbar-thumb  滑块部分；::-webkit-scrollbar-thumb  轨道部分；⼀开始不想要显⽰的时候可以定义overflow=auto，这样只有需要滚动条的时候才会展⽰，代码如下
1.overview_alarm_list{
2        height: 100%;
3        overflow-x: auto;
4        border: none;
5    }
6/*定义滚动条的整体样式使其变窄*/
7    .overview_scroll::-webkit-scrollbar{
8        width: 4px;
9        height: 1px;
10    }
11/*定义滚动条的滑块的样式有圆⾓和阴影以及⾃定义的背景⾊*/
12    .overview_scroll::-webkit-scrollbar-thumb{
13        border-radius: 4px;
14        -webkit-box-shadow: inset 0 0 2px #00B47F;
15        background: #00B47F;
16    }
17/*定义滚动条所在轨道的样式。有圆⾓和阴影以及淡⾊系的背景⾊*/
18    .overview_scroll::-webkit-scrollbar-track{
19        -webkit-box-shadow: inset 0 0 2px #E6FAF3;
20        border-radius: 4px;
21        background: #E6FAF3;
22    }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。