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

2023年7月6日 134次阅读

我有一个名为’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

最佳答案

if I add css for scrollbar using javascript, its not working

问题不是由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>
点赞