【css】改变浏览器默认滚动条样式

最新推荐文章于 2024-07-31 19:03:34 发布

没有梦想的coder

最新推荐文章于 2024-07-31 19:03:34 发布

阅读量2k

点赞数 2

分类专栏： css 文章标签： css 改变浏览器滚动条修改默认滚动条自定义滚动条

本文链接：https://blog.csdn.net/liyunkun888/article/details/90237651

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这个网上很多的教程，我就不多哔哔了，直接贴代码，方便自己和大家使用。

可以把下面的代码放到一个css中，然后全局引入就可以了。

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* 滚动条有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
    background-color: transparent;
    border-radius: 5px;
}

/* 滚动条滑块(竖向:vertical 横向:horizontal) */
::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color:#28f;
    border-radius: 5px;
}

/* 滚动条滑块hover */
::-webkit-scrollbar-thumb:hover {
    background-color: red;
}

/* 同时有垂直和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
    display: block;    /* 修复交汇时出现的白块 */
}