我在使用var(…)为Firefox设置滚动条样式时遇到了一个问题.
我们可以看到下面的代码:* {
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background: var(--sb-bgc);
}
scrollbar-color: var(--sb-bgc) transparent;
scrollbar-width: thin;
}
一切都应该正常工作，但主滚动条Firefox在var(…)． 在站点深处，其他滚动条在Firefox中正常工作…
如果我直接使用color，如red或者一些变量，比如$ somevariable一切正常。问题是只有当我使用var(…)-我需要它在浅色和深色主题之间切换颜色。
编辑:
我用的是Windows 10。
将data-theme="light"或data-theme="dark"添加到body标签中。在body标签中添加root类的div。
以某种风格。SCSS文件复制(这在主页面上不起作用，因为var(…)属性:
.root {
height: 200vh;
}
$lightBlueColor: #2ac6c7;
$darkBlueColor: #17b9ba;
[data-theme='light'] {
--sb-bgc: #{$lightBlueColor};
}
[data-theme='dark'] {
--sb-bgc: #{$darkBlueColor};
}
* {
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background: var(--sb-bgc);
}
scrollbar-color: var(--sb-bgc) transparent;
scrollbar-width: thin;
}
scrollbar-color中直接使用$lightBlueColor或#2ac6c7，则没有问题，一切都很好。当我使用var(…)什么也没有发生。再来一次。我知道我可以写下面的代码，它将工作:
...
scrollbar-color: $lightBlueColor transparent;
...
或
...
scrollbar-color: #2ac6c7 transparent;
...
但这对我来说不是解决方案因为当主题改变时，颜色需要改变。因此，我需要一个工作的var(…)房地产解决方案。
Firefox使用不同的滚动条样式属性，你可以添加
.container {
white-space: nowrap;
overflow-y: hidden;
width: 500px;
**scrollbar-width: thin;
scrollbar-color: #e3e3e3 transparent;**
}
设置样式
例如，您可以查看此链接https://codepen.io/reacraf/pen/ExaBZzZ
我建议你看看浏览器兼容性
目前只支持Firefox滚动条功能:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
为Chrome和其他浏览器设置滚动条样式:
- https://developer.mozilla.org/en-US/docs/Web/CSS/: -webkit-scrollbar
- https://webkit.org/blog/363/styling-scrollbars/
* {
box-sizing: border-box;
/* Firefox only */
scrollbar-width: thin;
scrollbar-color: rebeccapurple green;
}
html,
body {
block-size: 300%;
}
/* Chrome, Edge, Safari... */
::-webkit-scrollbar-button {
background: #5f13ca;
border: 3px solid gray;
border-radius: 4px;
}
::-webkit-scrollbar {
width: 20px;
height: 20px;
}
::-webkit-scrollbar-thumb {
background: #3b82f6;
border: 3px solid gray;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background: #a1a1aa;
}
::-webkit-scrollbar-corner {
background: white;
border: 3px solid gray;
border-radius: 4px;
}
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
display: block;
}
.container {
block-size: 50vh;
background-color: #ffecaf;
overflow-y: scroll;
}
.container > .child {
background-color: aquamarine;
inline-size: 50%;
min-block-size: 300%;
margin: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="container">
<div class="child">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque
molestias incidunt minus ea praesentium repellendus cum officia
quas eius quasi distinctio libero non neque id quis inventore
veritatis nemo, numquam nobis et voluptas voluptatum! Neque,
blanditiis! Dolores vitae architecto ullam accusamus voluptatem
ratione ab sit quae quaerat exercitationem fugiat sunt
laboriosam cupiditate minus omnis labore, facilis sed ut!
Possimus atque non nobis facilis numquam deleniti officiis
accusamus consequuntur nisi repudiandae. Veniam, molestias illum
saepe rerum fuga sapiente dolorum cupiditate pariatur porro ipsa
blanditiis repudiandae illo eligendi, tempora esse, placeat
officiis. Facilis, quasi. Facilis inventore hic, vel sint a
fugit nesciunt.
</div>
</div>
</body>
</html>编辑:
我编辑了Firefox上的代码，并意识到;如果