如何通过 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 样式表规则并在滚动时更新它。

这是我用来在 Whosebug 本身中测试的片段（通过运行直接从控制台）：

// Based on 
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()})`;
});

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

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

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

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

How to change the scrollbar styling via javaScript

javascript

css

webkit

scrollbar

styling