设置滚动条样式怎么操作（自定义滚动条样式）

652次浏览发布时间：2024-06-01 15:51:20

前言

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

.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

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

大家也可以根据自己的喜好设置滚动条的颜色或者给滚动条增加图片；