CSS样式表自定义滚动条样式

前言

在我们实际开发过程中可能会遇到页面出现滚动条的情况，但是在常规情况下滚动条的默认样式咱们是不敢恭维的，所以咱们就需要对滚动条的一些样式进行调整，换成自己想要的样式，那具体怎么做那，咱们一起来看看；

样式表

.div::-webkit-scrollbar {

width: 5px;

}

. div::-webkit-scrollbar-track {

background: rgb(179, 177, 177);

border-radius: 10px;

}

. div::-webkit-scrollbar-thumb {

background: rgb(136, 136, 136);

border-radius: 10px;

}

. div::-webkit-scrollbar-thumb:hover {

background: rgb(100, 100, 100);

border-radius: 10px;

}

. div::-webkit-scrollbar-thumb:active {

background: rgb(68, 68, 68);

border-radius: 10px;

}

说明

::-webkit-scrollbar

此属性是设置整个滚动条的样式

::-webkit-scrollbar-track

此属性是设置滚动条的滚动区域的样式即滚动条的轨道

::-webkit-scrollbar-thumb

次属性是设置滚动条可拖拽部分的样式即滚动条的滑块