当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。
首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。
滚动条的css样式主要有三部分组成:
1、::-webkit-scrollbar 定义了滚动条整体的样式;
2、::-webkit-scrollbar-thumb 滑块部分;
3、::-webkit-scrollbar-thumb 轨道部分;
下面以overflow-y:auto;为例(overflow-x:auto同)
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background-color: rgba(150,150,150,.5);
border-radius: 5px;
}
::-webkit-scrollbar-track {
border-radius: 0;
background-color: transparent;
}
结果如下: 全局改变