XiangJv

当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过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、标签名等之类的任何东西。