Guide on creating CSS for webkit scrollbar through the use of Javascript

Question

Guide on creating CSS for webkit scrollbar through the use of Javascript

I have a div named 'dynamic' with text inside, and I am applying styling to it using javascript.

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

It is functioning properly. Similarly, I am attempting to add some CSS for the scrollbar, which can be achieved with the following CSS code:

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);
}

Now, I have added it through javascript like this:

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);

Unfortunately, this is not producing the expected result.

My query is:

In the first scenario, adding color to the "dynamic" div using javascript worked fine. However, in the second scenario, while attempting to add CSS for the scrollbar using javascript, it is not working. If the first scenario worked, then the second scenario should work as well.

So, did I write it incorrectly or is there another way to add CSS for webkit-scrollbar using javascript?

Here is the code in jsFiddle

javascript jquery html css

Answer 1

Answer №1

Having trouble styling scrollbars using javascript

The issue may not be with the javascript itself, try appending the styles to the head tag for compatibility with all javascript-enabled browsers.

Using the Pseudo element ::-webkit-scrollbar should work for Webkit browsers but not for Firefox (Gecko). For a similar discussion, check out this thread: Custom CSS Scrollbar for Firefox.

Feel free to test the code snippet below and observe the scrollbar color.

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>

Answer 2

Having trouble styling scrollbars using javascript

The issue may not be with the javascript itself, try appending the styles to the head tag for compatibility with all javascript-enabled browsers.

Using the Pseudo element ::-webkit-scrollbar should work for Webkit browsers but not for Firefox (Gecko). For a similar discussion, check out this thread: Custom CSS Scrollbar for Firefox.

Feel free to test the code snippet below and observe the scrollbar color.

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>

Guide on creating CSS for webkit scrollbar through the use of Javascript

Answer №1

Similar questions

I'm facing some uncertainties with a couple of AngularJS code snippets

Prevent scrolling while popup is open

Pressing the up arrow in Javascript to retrieve the most recent inputs

Utilize a Sails.js Single Page Application (SPA) to route all unutilized paths to a centralized controller function

The formatting of the list is not being correctly displayed in the Ajax Jquery list

Is there a way to eliminate the feature that rearranges characters in reverse order?

Having problems getting my fixed header to work on my datatable. What could be the

Error: null value cannot be scrolled into view - testing with react, jest, and enzyme

Navigating from an error page to the homepage with Next.JS 13: A quick and easy guide

Is there a way to extract the key and value pair from this function?

Bootstrap 4 radio buttons are not aligning properly with the padding

Ajax request terminates once PHP has looped for a specific duration of time (2 minutes)

Tips for creating the ultimate footer section on your webpage

The Ajax page does not respond to click events when the function is declared within $(function(){ }) block

Create HTML content from a file retrieved from the server

Is it possible to retrieve JSON data from the server without having to reload the page?

Next.JS CSS modules are experiencing issues with functionality

What is the best way to make a text scroll smoothly from left to right on my website?

How to customize the text color of the notchedOutline span in Material UI

React hook form submit not being triggered