如何通过 javaScript 更改滚动条样式

Question

我已经实现了一个自定义的滚动条（代码如下）。

我想使用 javaScript 事件 "onScroll" 来改变滚动条 thumb 样式 而 滚动，但我不知道这样做的正确方法。

有没有办法访问滚动条样式，也许是一个 JavaScript 对象，即： Container.style.-webkit-scrollbar-thumb.backgroundColor = 'black';?

这里有一些代码来演示我的滚动条是如何实现的：

CSS：

#container::-webkit-scrollbar {
  width: 10vw;
}

#container::-webkit-scrollbar-thumb {
  background-color: grey;
  border-radius: 50px;
  border: 5px solid black;
}

#container::-webkit-scrollbar-thumb:hover {
  border: 2px solid black;
  background-color: grey;
}

#container::-webkit-scrollbar-track {
  background-color: black;
  border-bottom-left-radius: 12px;
  border-top-left-radius: 12px;
}

JavaScript：

elementsContainer.addEventListener("scroll", function wheelStyle() {
  //elementsContainer.WHAT??
});

Answer 1

这是我的解决方案：

这个想法是动态创建一个 CSS 样式表规则并在滚动时更新它。

这是我在 stackoverflow 本身中测试的 sn-p（直接从控制台运行）：

// Based on https://stackoverflow.com/a/31126328/1941313
appendRule = (sheet) => {
  console.log({sheet});
  const len = sheet.cssRules.length;
  sheet.insertRule('body{}', len);
  return sheet.cssRules[len];
}

ruleForScroll = appendRule(Array.from(document.styleSheets).slice(-1)[0]);

randomColor = () => Math.floor(255 * Math.random());

component = document.querySelector('.left-sidebar--sticky-container.js-sticky-leftnav');

component.addEventListener("scroll", function wheelStyle() {
    ruleForScroll.selectorText = '.left-sidebar--sticky-container.js-sticky-leftnav::-webkit-scrollbar-track';
    ruleForScroll.style["background"] = `rgb(${randomColor()},${randomColor()},${randomColor()})`;
});

这特别影响stackoverflow的侧边菜单，滚动时随机改变滚动条的颜色。

Here is an independent solution in a CodePen。请注意，应用样式的一个重要先决条件是以下 css 规则：

.test::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
}