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

本文主要介绍关于css,前端,css3的知识点，对【CSS样式表自定义滚动条样式】和【css3滚动条样式】有兴趣的朋友可以看下由【名称正在更新……】投稿的技术文章，希望该技术和经验能帮到你解决你所遇的CSS相关技术问题。

css3滚动条样式

前言

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

样式表

.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

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

本文《CSS样式表自定义滚动条样式》版权归名称正在更新……所有，引用CSS样式表自定义滚动条样式需遵循CC 4.0 BY-SA版权协议。