为什么 scrollbar-color 属性 不能直接作用于 body？

Question

我正在尝试设置滚动条属性的样式，即 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars。无论如何，当这些属性直接应用于 body 时，如 body {...}，它们不起作用。例如：

body {
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

<div style="height: 10000px"></div>

但是，如果将其更改为通配符，则可以使用：

* {
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

<div style="height: 10000px"></div>

这里到底发生了什么？为了以防万一，我在 MacOS 上使用最新的 Firefox。这是一个错误吗？

Answer 1

在这种情况下，滚动的是视口，而不是 body。并且，由于根元素上滚动条属性的值（HTML，html 元素）应用于视口：

html {
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

<div style="height: 10000px"></div>

将 CSS 应用于正确的元素，它工作正常。

归功于 Alohci for their with a careful reading of the draft specification for the properties。