CSS 自定义滚动条

CSS

前端

发布日期: 2025-08-12

更新日期: 2025-08-12

文章字数: 130

CSS 自定义滚动条

具体效果可以参考本博客。如果你使用 matery 主题，那么你可以直接复制到 matery.css 里。

/* 滚动条滑块*/
::-webkit-scrollbar-thumb {
    background-color: #6495ED;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    border-radius: 2em; /* 圆角滑块 */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #6495ED30;
    border-radius: 2em;
}
/* 滚动条本身 */
::-webkit-scrollbar {
    width: 8px;
    height: 12px;
}