Firefox主滚动条使用CSS var()设置颜色不生效如何解决

问题根因 #

Firefox的页面顶层视口滚动条归属于:root（即<html>元素），而非<body>元素，失效由两个逻辑问题导致：

• 主题标识属性data-theme被设置在<body>标签上，自定义属性--sb-bgc的作用域仅覆盖body的后代节点，<html>元素本身不在该作用域内，无法读取到变量有效值，归属于它的顶层滚动条自然无法渲染正确颜色；页面内部滚动条所属元素都在body子树内，因此可以正常读取变量。
• 通配符选择器*虽然语法上匹配所有元素，但Firefox针对视口级滚动条做了特殊渲染逻辑，不会从通配符规则中正确继承CSS自定义属性值，必须显式给根节点设置规则才能生效。

固定色值、SCSS变量属于编译阶段就替换为静态值的写法，不存在运行时的变量作用域查找逻辑，因此不会触发该异常。

修复方案 #

将主题标识挂载到根节点，同时显式为根节点单独设置滚动条样式，修正后的完整SCSS代码如下：

.root {
  height: 200vh;
}

$lightBlueColor: #2ac6c7;
$darkBlueColor: #17b9ba;

// 主题变量定义在根节点作用域，覆盖全文档
:root[data-theme='light'] {
  --sb-bgc: #{$lightBlueColor};
}

:root[data-theme='dark'] {
  --sb-bgc: #{$darkBlueColor};
}

// 单独给根节点设置Firefox标准滚动条属性，适配顶层视口滚动条
:root {
  scrollbar-color: var(--sb-bgc) transparent;
  scrollbar-width: thin;
}

// 通用滚动条样式，兼容webkit内核浏览器和普通内部元素
* {
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--sb-bgc);
  }

  // 非根元素设置标准滚动条属性
  &:not(:root) {
    scrollbar-color: var(--sb-bgc) transparent;
    scrollbar-width: thin;
  }
}

若受业务逻辑限制无法将data-theme属性移至html标签，可在切换主题时通过JS同步给html节点设置对应的--sb-bgc变量值，或在原有body变量规则外单独给html追加一份相同的变量定义，效果完全一致。

调整后明暗主题切换时，顶层滚动条与页面内部滚动条都会正确响应CSS变量值的变化，动态更新颜色，无需写死固定色值即可满足主题切换需求。

内容的提问来源于stack exchange，提问作者Bart