我可以将滚动条的特定颜色更改为红色，如下所示，但我想根据从用户那里获得的颜色变量来更改滚动颜色。

我想我可以用两种方法来解决这个问题。

1. 我需要给第15行一个变量。（而不是像红色这样的特定颜色）这可能吗？

或者

2. 我需要处理滚动条是DIV元素，然后我可以改变TS文件中的滚动条颜色。但是我如何在DOM中捕捉滚动条呢？

谢谢.

顺晟科技：

你的CSS

var colorInput = document.getElementById("color-input");
var element = document.getElementById("el");

colorInput.onchange = function() {

  el.style.setProperty("--scrollbar-color", colorInput.value);

}

这很简单，你可以用这种方法试试。您可以在HTML中包含颜色输入元素，并将滚动条的背景颜色设置为该元素的值。

var colorInput = document.getElementById("color-input");
var root = document.querySelector(":root");

colorInput.onchange = function() {

  root.style.setProperty("--scrollbar-color", colorInput.value);

}

<代码>：根{--滚动条颜色：RGB（255，0，0）；/*红色*/}迪夫{边距：10px；边框：1px纯黑色；填充：10px；高度：100px；Overflow-Y：滚动；}：-webkit-scrollbar{-webkit-外观：无；宽度：15px；背景色：浅灰色；}：-webkit-scrollbar-thumb{背景色：var（--scrollbar-color）；}

<代码><；输入type=“ color ” ID=“ color-input ”>；<；细分（>；）文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；<；/DIV>；

所以现在当用户选择一种颜色时，它就会应用到滚动条上。尝试使用“运行代码片段”按钮

编辑：-

正如你所评论的，它可以像这样做，只是一个简单的改变。

的代码。

:root {

  --scrollbar-color: rgb(255, 0, 0); /* red */

}
div {

  margin: 10px;
  border: 1px solid black;
  padding: 10px;
  height: 100px;
  overflow-y: scroll;

}

::-webkit-scrollbar {

  -webkit-appearance: none;
  width: 15px;
  background-color: lightgrey;

}

::-webkit-scrollbar-thumb {

  background-color: var(--scrollbar-color);

}

<input type="color" id="color-input">
<div>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>

<代码><；输入type=“ color ” ID=“ color-input ”>；<；DIV ID=“ el ”>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；文本<；BR>；<；/DIV>；