css自定义滚动条样式

原创已于 2022-10-08 10:57:50 修改 · 235 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

于 2019-04-22 13:40:13 首次发布

css 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何使用CSS定制滚动条的样式，包括滚动条的宽度、高度、按钮、轨道、滑块、角落和调整器等各个部分，适用于追求个性化界面设计的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// An highlighted block
.system-sub-slidebar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.system-sub-slidebar::-webkit-scrollbar-button {
    background-color: #11151d;
}

.system-sub-slidebar::-webkit-scrollbar-track {
    background: #11151d;
}

.system-sub-slidebar::-webkit-scrollbar-thumb {
    background: #4a4f5a;
    border-radius: 8px;
}

.system-sub-slidebar::-webkit-scrollbar-corner {
    background: #11151d;
}

.system-sub-slidebar::-webkit-scrollbar-resizer {
    background: #11151d;
}

.robot-box::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
.robot-box::-webkit-scrollbar-thumb {
  border: 0 solid hsla(0, 0%, 100%, 0);
  border-radius: 0;
  background: #bbb;
}