如何使用原生JavaScript动态修改滚动条样式？

伪元素不属于真实DOM节点，没有对应的DOM对象引用，你写的main.webkitScrollBar本身就是不存在的属性，自然不可能通过.style直接修改样式，这也是你之前所有调整都不生效的根本原因。

下面给两个零依赖的纯原生JS实现方案，完全适配主题切换的动态改色需求，不需要jQuery或者任何第三方插件。

页面初始化时创建一个独立的style标签专门存放滚动条样式，主题切换时直接更新这个标签里的CSS内容即可，和你写静态CSS的效果完全一致。

// 初始化：仅需执行一次
const scrollbarStyleEl = document.createElement('style');
document.head.appendChild(scrollbarStyleEl);

// 封装更新方法，主题切换时直接传对应颜色调用即可
function setMainScrollbarColor(trackBg, thumbBg) {
  scrollbarStyleEl.textContent = `
    main::-webkit-scrollbar {
      width: 10px;
      background-color: ${trackBg};
    }
    main::-webkit-scrollbar-thumb {
      background-color: ${thumbBg};
    }
    /* 兼容Firefox */
    main {
      scrollbar-width: thin;
      scrollbar-color: ${thumbBg} ${trackBg};
    }
  `;
}

// 调用示例：默认浅色主题
setMainScrollbarColor('#c2c3c4', '#43474C');
// 切换深色主题时直接传新的色值即可
// setMainScrollbarColor('#2a2a2a', '#7a7a7a');

• 这个方案没有任何额外DOM开销，初始化一次后反复调用性能极高，兼容所有支持自定义滚动条样式的现代浏览器。

如果你已经在主题系统里用CSS变量管理色值，这个方案几乎不需要额外写JS逻辑。
首先修改你的静态CSS，把滚动条颜色替换成CSS变量：

:root {
  --scrollbar-track: #c2c3c4;
  --scrollbar-thumb: #43474C;
}
main::-webkit-scrollbar {
  width: 10px;
  background-color: var(--scrollbar-track);
}
main::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}
main {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

主题切换时只需要修改根节点上的CSS变量值即可，所有用到变量的地方（包括滚动条）会自动更新样式：

function applyTheme(theme) {
  const root = document.documentElement;
  root.style.setProperty('--scrollbar-track', theme.scrollbarTrack);
  root.style.setProperty('--scrollbar-thumb', theme.scrollbarThumb);
  // 其余主题色的修改逻辑可以写在这里
}

• 这个方案是目前前端主题切换的主流实现方式，所有主题色统一管理，不需要针对滚动条单独写特殊逻辑，维护成本极低。

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