Question 219777 in Html Question posted in
Some basic documentation can be found here.

I want to change the color of html scrollbar using javascript

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search