I want to change the color of html scrollbar using javascript

Question

Im making a custom theme for my app and i want to change the color of scroll bar from "#1a1a1a" to "FF5555" when i click a button in javascript only. i've tried multiple things such as document.body.style.scrollbarBaseColor = "#FF5555"; but it doesnt work. Im not using any framework its just plain html,css and js

Please share more details, like a runnable example that helps others to check your code for problems — Nico Haase, Jul 30 '23 at 17:52
You can style the scrollbar across browsers using a few different things in CSS. I would avoid setting styles via JavaScript. Take a look at this article: https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/ — Chris Barr, Jul 30 '23 at 17:54
Why do you want to do that with JavaScript and not in your CSS directly? — t.niese, Jul 30 '23 at 18:26
@t.niese because the button is in javascript and i want to change it whenever the button is pressed — MrFiend, Jul 31 '23 at 10:22
@MrFiend Sure but you then could still do most of the work in CSS and just add/remove a class to apply the style. (See my answer for more details). — t.niese, Jul 31 '23 at 10:46
Please add all clarification **to your question** by editing it, not to the comment section — Nico Haase, Jul 31 '23 at 10:49

score 0 · Accepted Answer · answered Jul 31 '23 at 03:30

I don't know why are you trying to do it with javascript.

But here, I just made an scratch on..

How to change the color of html scrollbar using javascript.

First, I create an element style so we can add css here.

Second, we need to add style for our scrollbar on the created element(style). So, using createTextNode we add our style on STRING data type.

Last, we need to activate the created style on our html file. By doing getElementByTagName we'll get HTMLCollection from [head] tag then we add array[0] so we can access its properties tho append the created style.

let div = document.getElementById("output");
for(let i=0; i<50; i++){
  div.innerHTML += `Sample text ${i}<br>`
}
function changeScroll(){
  let style = document.createElement("style");
  style.appendChild(document.createTextNode("div::-webkit-scrollbar{background-color:#FF5555 !important;}div::-webkit-scrollbar-thumb{background-color:darkblue !important;}"));
  document.getElementsByTagName("head")[0].appendChild(style);
}

div{
  overflow-y:scroll;
  width:200px;
  height:200px;
}

<div id="output"></div>
<button onclick="changeScroll()">Change Scroll</button>

Yes this one worked, appreciated – MrFiend Jul 31 '23 at 10:03 — MrFiend, Jul 31 '23 at 10:03

t.niese · Answer 2 · 2023-07-31T10:50:54.103

The probably cleanest solution is to do the styling in CSS and "guard" it with a class that you add/remove on demand.

That way you have proper separation between JavaScript and CSS.

document.querySelector("button").addEventListener('click', () => {
  document.querySelector(".scroller").classList.toggle('colored-scrollbar')
})

/*
Definition of scrollbar colors
*/
:root {
  --scrollbar-color-handler: #007;
  --scrollbar-color-background: #bada55;
}

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
}

/*
Scrollbar coloring for browsers supporting CSS Scrollbars Styling Module Level1 (FF 64+)
*/
.colored-scrollbar {
  scrollbar-color: var(--scrollbar-color-handler) var(--scrollbar-color-background);
}

/*
Non-standard method to style scrollbars in webkit/blink based browsers (Chrome, Edge, Safari, ...)
*/
.colored-scrollbar::-webkit-scrollbar {
  background-color: var(--scrollbar-color-background);
}

.colored-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color-handler);
}

<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
  dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
<button>toggle scrollbar color</button>

I want to change the color of html scrollbar using javascript

2 Answers2