如何根据用户选择动态修改滚动条颜色？两种实现方案咨询

可以，你可以用CSS自定义属性（也叫CSS变量）实现这个需求。
从你提供的代码截图来看，你现在用的是webkit内核的滚动条伪类写法，把固定的红色值替换成CSS变量即可，示例代码如下：

/* 先在全局定义CSS变量，可设置默认值 */
:root {
  --scrollbar-thumb-color: red;
}

/* 你的原有滚动条样式，把固定色值替换为变量引用 */
::-webkit-scrollbar-thumb {
  /* 把原来的red替换成var(--scrollbar-thumb-color) */
  background: var(--scrollbar-thumb-color);
  border-radius: 10px;
}

后续在TS中拿到用户输入的颜色值后，直接修改全局CSS变量的取值即可同步更新滚动条颜色：

// userColor为你从用户侧获取的颜色变量
const userColor = '#00ff00';
document.documentElement.style.setProperty('--scrollbar-thumb-color', userColor);

这种方式不需要改动原有CSS的结构，仅需一行TS代码就能实现颜色的动态更新，性能损耗非常低。

首先明确：浏览器的原生滚动条属于浏览器内置的UI元素，不属于常规DOM节点，你无法通过querySelector、getElementById这类常规DOM选择器捕获到它，也没办法像处理普通div元素一样直接修改它的样式。
如果你确实想要把滚动条作为可直接操作的DOM元素处理，只能自行实现自定义滚动条组件：

• 自行编写两个div元素，分别作为滚动轨道和滚动滑块
• 监听内容区域的滚动事件，手动同步滑块的位置、高度，同时监听滑块的拖拽、点击事件同步内容的滚动位置
• 这种方案下，滚动滑块本身就是你创建的普通DOM元素，你可以直接给它绑定ref或者通过选择器获取，在TS中直接修改它的样式属性即可，示例如下：

// 假设你给滚动滑块元素加了id="custom-scrollbar-thumb"
const scrollbarThumb = document.getElementById('custom-scrollbar-thumb') as HTMLDivElement;
const userColor = '#0000ff';
scrollbarThumb.style.backgroundColor = userColor;

不过自定义滚动条需要额外适配滚轮事件、不同屏幕尺寸、内容高度动态变化等多种边界情况，开发成本远高于第一种CSS变量方案，除非你有非常复杂的滚动条交互需求，否则更推荐使用第一种方案。

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