如何使用javascript更改“：：webkit scrollbar”的css样式？

我使用以下方法，但不起作用：

首先，我的HTML的CSS样式包含

：：webkit滚动条
{
宽度：12px；
}

要更改css样式，我使用

id=“my_sheet”

然后，我使用

my_sheet=document.getElementById（“my_sheet”）.sheet

获取css样式表

我使用命令

sheet.addRule（'：：webkit scrollbar'，'width:10px；'）但控制台显示

VM1023:1未捕获的DomeException:未能在“CSSStyleSheet”上执行“addRule”：未能分析规则“：：webkit滚动条{width:10px；}”。
时间：1:7
（匿名）@VM1023:1

---

但是这种方法可以改变HTML的其他元素。更改

的CSS样式的正确方法是什么：webkit滚动条
您可以使用
CSS
而不使用
JavaScript

以下是更新的小提琴：
：：-webkit滚动条{
宽度：10px；
}
：-webkit滚动条轨迹{
背景#f1f1；
}
：-webkit滚动条拇指{
背景：#888；
}
：-webkit滚动条拇指：悬停{
背景:#555；
}

学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

使用Javascript有什么原因吗？我想做的是：将光标悬停在拇指和轨迹上时，滚动条的宽度可以更改。但现在我只能通过将光标悬停在拇指上来触发事件，似乎我无法通过更改滚动条轨迹的css样式来更改滚动条的宽度，所以我尝试通过javascript来实现这一点。。。有更好的办法吗？
VM1023:1 Uncaught DOMException: Failed to execute 'addRule' on 'CSSStyleSheet': Failed to parse the rule '::webkit-scrollbar { width:10px; }'.
    at <anonymous>:1:7
(anonymous) @ VM1023:1