如何使用javascript为webkit滚动条编写css？

我有一个名为“dynamic”的div，其中包含一些文本，我正在使用javascript为它添加样式

var styleElement = document.createElement("style");
styleElement.appendChild(document.createTextNode("#dynamic { color: red; }"));
document.getElementsByTagName("head")[0].appendChild(styleElement);

它很好用。同样，我正在尝试为scrollbar添加一些css，我们可以通过下面的css代码来实现：

div ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

div ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

所以，现在我使用javascript添加它，如下所示：

var styleElement = document.createElement("style");
styleElement.appendChild(document.createTextNode("
     div ::-webkit-scrollbar{
        -webkit-appearance: none;
         width: 7px;
     }
     div ::-webkit-scrollbar-thumb{
         border-radius: 4px;
         background-color: rgba(0,0,0,.5);
         -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
     }
"));
document.getElementsByTagName("head")[0].appendChild(styleElement);

但这并不像预期的那样有效

我的问题是:

对于第一个场景，它工作得很好（使用javascript为“dynamic”div添加颜色），但对于第二个场景，如果我使用javascript为scrollbar添加css，它就不工作了。如果第一个场景有效，那么第二个场景也应该有效

所以，无论我写错了还是有其他方法可以使用javascript为webkit scrollbar添加css

这是密码

如果我使用javascript为scrollbar添加css，它将不起作用

这个问题不是由javascript引起的，在任何支持js的浏览器中，样式都应该附加到head标记

伪

：：-webkit滚动条应适用于webkit浏览器，但不适用于Firefox（Gecko）。另一个类似的线程可以在这里找到

尝试运行下面的代码段，也可以查看滚动条的颜色。
var styleElement=document.createElement（“样式”）；
styleElement.appendChild（document.createTextNode（“div:-webkit滚动条{-webkit外观：无；宽度：7px；}div:-webkit滚动条拇指{边框半径：4px；背景色：rgba（250,0,0,0,5）；-webkit框阴影：0.01pxrgba（255255255,5）；}”）；
document.getElementsByTagName（“head”）[0].appendChild（styleElement）；
#容器{
宽度：500px；
高度：300px；
背景色：#E0；
位置：相对位置；
}
#拖拉的{
宽度：300px；
高度：200px；
左：10px；
顶部：20px；
背景色：白色；
位置：绝对位置；
溢出：滚动；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。“但我必须向你们解释，谴责快乐、赞美痛苦的错误观念是如何产生的，我将向你们全面介绍这一体系，并阐述伟大的真理探索者、人类幸福的建设者的实际教导。没有人拒绝、不喜欢或回避快乐本身，因为快乐本身就是快乐，但因为那些不知道如何理性地追求快乐的人会遇到极其痛苦的后果。再也没有人爱自己、追求自己或渴望自己获得痛苦，因为这是痛苦，而是因为偶尔会发生一些情况，在这些情况下，辛劳和痛苦可以使他获得一些巨大的快乐。举一个简单的例子，除了从中获得一些好处外，我们当中谁曾进行过艰苦的体育锻炼？但是，谁有权利对一个选择享受没有烦人后果的快乐的人，或者一个选择避免没有结果快乐的痛苦的人挑剔呢？”
@如果答案已更新，请尝试运行代码段。