当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类:-webkit-scrollbar 来实现对滚动条的自定义。
下面是本站的css的滚动条的代码
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color: transparent;
-webkit-box-shadow: transparent;
}
/*定义滚动条*/
::-webkit-scrollbar-thumb {
background-color: #bbb;
border-radius: 10px;
}
/*定义滚动条高宽及背景*/
::-webkit-scrollbar {
background-color: transparent;
// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
width: 5px;
height:2px;
}
如果需要隐藏滚动条,可以直接把宽度改成 0 就好了。
如果文档中会有多个滚动条出现,而且希望所有的滚动条样式是一样的,那么伪元素前面不需要加上class、id、标签名等之类的任何东西。
标签: cssH5部分前端frontHTML&CSS