您可以将scrollbar-color设置为以下值之一(来自MDN的说明)：
auto 在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分的默认平台渲染 .
dark 显示一个黑色滚动条，可以是平台提供的滚动条的深色变体，也可以是带深色的自定义滚动条 .
light 显示一个轻量滚动条，可以是平台提供的滚动条的轻微变体，也可以是带有浅色的自定义滚动条 .
将第一种颜色应用于滚动条滑块，第二种颜色应用于滚动条轨道 .
macOS notes:
作为macOS默认的自动隐藏半透明滚动条无法使用此规则进行着色(它们仍然根据背景选择自己的对比色) . 仅显示永久显示的滚动条(“系统首选项”>“显示滚动条”>“始终”) .
Visual Demo:
.scroll {
width: 20%;
height: 100px;
border: 1px solid grey;
overflow: scroll;
display: inline-block;
}
.scroll-color-auto {
scrollbar-color: auto;
}
.scroll-color-dark {
scrollbar-color: dark;
}
.scroll-color-light {
scrollbar-color: light;
}
.scroll-color-colors {
scrollbar-color: orange lightyellow;
}
auto
auto
auto
auto
auto
auto
dark
dark
dark
dark
dark
dark
light
light
light
light
light
light
colors
colors
colors
colors
colors
colors
您可以将scrollbar-width设置为以下值之一(来自MDN的说明)：
auto 平台的默认滚动条宽度 .
thin 提供该选项的平台上的薄滚动条宽度变体，或者比默认平台滚动条宽度更薄的滚动条 .
none 未显示滚动条，但该元素仍可滚动 .
您还可以根据规范设置特定长度值 . thin 和特定长度都可能在所有平台上都没有做任何事情，它究竟是做什么的是特定于平台的 . 特别是，Firefox似乎目前不支持特定的长度值(this comment on their bug tracker seems to confirm this) . 该 thin keywork确实得到了很好的支持，但至少有macOS和Windows支持 .
值得注意的是，长度值选项和整个 scrollbar-width 属性正在考虑在将来的草稿中删除，如果发生这种情况，可能会在将来的版本中从Firefox中删除此特定属性 .
Visual Demo:
.scroll {
width: 30%;
height: 100px;
border: 1px solid grey;
overflow: scroll;
display: inline-block;
}
.scroll-width-auto {
scrollbar-width: auto;
}
.scroll-width-thin {
scrollbar-width: thin;
}
.scroll-width-none {
scrollbar-width: none;
}
auto
auto
auto
auto
auto
auto
thin
thin
thin
thin
thin
thin
none
none
none
none
none
none
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
