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

Question

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

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

效果很好。同样，我试图为滚动条添加一些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向“动态”div添加颜色），但对于第二个场景，如果我使用javascript为滚动条添加css，它不起作用。如果第一种情况有效，那么第二种情况也应该有效。

那么，是我写错了还是有其他方法使用javascript为webkit-scrollbar添加css？

这是jsFiddle的代码

Answer 1

如果我使用 javascript 添加滚动条的 css，它不起作用

该问题不是由 javascript 引起的，并且样式应附加到任何启用 js 的浏览器中的 head 标记中。

Pseudo::-webkit-scrollbar应该适用于 webkit 浏览器，但不适用于 Firefox (Gecko)。另一个类似的线程可以在这里找到Custom CSS Scrollbar for Firefox。

尝试运行下面的代码片段，同时查看滚动条的颜色。

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(250,0,0,.5);-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);}"));
document.getElementsByTagName("head")[0].appendChild(styleElement);	

#container{
    width:500px;
    height:300px;
    background-color:#E0E0E0;
    position:relative;
}
#draggable{
    width:300px;
    height:200px;
    left:10px;
    top:20px;
    background-color:white;
    position:absolute;
    overflow:scroll;
}

<div id="container">
   <div id="draggable">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</div>
</div>