如何根据用户的选择更改滚动条颜色？

Question

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

我想我可以通过两种方式解决这个问题。

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

或者

1. 我需要将滚动条作为 div 元素处理，然后我可以在 ts 文件中更改滚动条颜色。但是如何在 dom 中捕捉滚动条？

谢谢。

Answer 1

很简单，你可以这样试试。 您可以在 html 中包含颜色输入元素，并将滚动条的背景颜色设置为其值。

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

colorInput.onchange = function() {

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

}

: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>

所以现在当用户选择一种颜色时，它会被应用到滚动条上。使用 run code sn-p 按钮尝试一下

编辑：-

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

在此处查看编辑后的代码。

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

colorInput.onchange = function() {

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

}

#el {

  --scrollbar-color : rgb(255, 0, 0) /* red */
  margin: 10px;
  border: 1px solid black;
  padding: 10px;
  height: 100px;
  overflow-y: scroll;

}

#el::-webkit-scrollbar {

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

}

#el::-webkit-scrollbar-thumb {

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

}

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