修改滚动条的样式

最新推荐文章于 2024-07-26 08:00:00 发布

Avenstave

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量598

点赞数 1

文章标签： css html5

本文链接：https://blog.csdn.net/weixin_45771219/article/details/123941270

版权

通常我们在项目中会因为匹配整体布局，或者为了整体的美观而需要对滚动条做出一些修改，同样的我也遇到了这个问题，对于新手来说这的确是个难题，不过看到这篇文章你们的问题也可以解决了，好了，不多说废话了，直接上代码：
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(rgb(17, 157, 212), rgb(17, 212, 105));
border-radius: 5px;
transition: 1s;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(rgb(17, 212, 105), rgb(17, 157, 212));
}
效果图：
在这里插入图片描述
宽度和颜色可以随意修改。
分享结束。