为什么 scrollbar-color 属性不能直接在 body 上工作？

Question

我正在尝试设置滚动条属性的样式，即https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars。无论如何，当这些属性直接应用在主体上时，如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 的comment 仔细阅读draft specification for the properties。