Is it possible to change the scrollbar design with vanilla JavaScript?

Question

I've been trying to create a solution for this but i couldn't, also didn't find anything useful. It would be great if the solution is pure vanilla JS, a few things that i saw included jQuery plugins but that's not the point here.

The CSS code is:

main::-webkit-scrollbar {
    background-color: #c2c3c4;
    width: 10px;
}
main::-webkit-scrollbar-thumb {
    background-color: #43474C;
}

The purpose is to change theme on the page so changing this scrollbar color is important. I tried with this JS code:

main.webkitScrollBar.style.backgroundColor = 'newColor';

This obviously didn't work. Also tried that line with some modifications but nothing happens. Thanks in advance!

Hi, have you seen these solutions? Change scrollbar with JS at runtime https://stackoverflow.com/questions/15376239/how-to-change-scrollbar-css-at-runtime-with-javascript Load CSS file with JS https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript — Burnsy, Jun 13 '22 at 23:32
Hey @Burnsy! yes i do, that's a good solution for sure, but in this website i can't use jQuery. This solution needs jQuery. Already trying the second one, thanks! — tobi, Jun 13 '22 at 23:41

norcal johnny · Accepted Answer · 2022-06-14T00:52:14.607

Var as a pseudo element and change like so..

function runfunction(){
document.body.style.setProperty('--color', 'black');
};

html {
}
body::-webkit-scrollbar {
  width: 20px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: white;
}
body::-webkit-scrollbar-track {
  background: red;
}
body::-webkit-scrollbar-thumb {
  background-color: var(--color, white); ;
  border-radius: 6px;
  border: 3px solid green;
}


html {
  background: lightgrey;
  overflow: hidden;
}
body {
  height: 100vh;
  background: whitesmoke;
  overflow-y: auto;
  max-width: 310px;
  margin: 0 auto;
  padding: 2rem;
  font: 100%/1.4 serif;
  border: 1px solid rgba(0, 0, 0, 0.25)
}
p {
  margin: 0 0 1.5em;
}
* {
  box-sizing: border-box;
}

<button onclick="runfunction()">try it</button>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem deleniti accusantium quasi ab ad officia cupiditate sed aliquam nobis expedita velit dolorum perspiciatis pariatur nam vero et magnam soluta tempora!</p>
<p>Eveniet deserunt consequatur porro molestiae nulla optio quis totam libero iste nemo odit eum facilis sapiente. Harum similique cupiditate voluptas ea optio sunt molestias eius ab qui obcaecati nesciunt id?</p>
<p>Necessitatibus delectus sint vitae eos quasi optio esse dignissimos enim laborum ipsum harum perspiciatis eaque. Magnam fugiat delectus neque laboriosam in accusamus a veniam inventore asperiores consequatur nihil quae quo.</p>
<p>Eligendi quaerat nesciunt sint nobis qui? Temporibus maiores esse molestiae hic cum culpa sed recusandae dolore sequi modi. Quos illum debitis odio consequatur voluptatum error aliquam rem similique officia recusandae.</p>
<p>Ex suscipit earum reiciendis eaque dolorem inventore accusantium modi voluptatum saepe cum quam tempora autem corrupti illum deleniti iure rerum mollitia quo ducimus soluta ea! Illum aliquid consectetur vitae quod?</p>
<p>Minus rem tempora quo. Deleniti mollitia dignissimos laborum quis quos facilis dolore soluta error provident recusandae veniam minus consequatur blanditiis. Facere tempore praesentium soluta fugiat quia eligendi dolores ullam doloribus!</p>
<p>Aut nulla perferendis officiis accusamus ut aspernatur hic possimus amet blanditiis incidunt repudiandae ullam inventore ipsam recusandae nihil provident facilis totam quibusdam natus eligendi optio quia sapiente rerum quos illo?</p>
<p>Porro soluta nisi impedit voluptatem ex accusantium facilis amet quod blanditiis quia similique totam enim id ratione minus quo modi sequi nam dicta iste aliquid itaque velit accusamus quibusdam consequuntur.</p>
<p>Ab assumenda in ad nesciunt recusandae labore voluptates vero suscipit tenetur ullam sint beatae odio harum quo aperiam quas temporibus pariatur consectetur saepe eveniet minus voluptatem atque iusto similique repudiandae?</p>
<p>In enim odit repellat maxime harum eum expedita fuga vel eaque quaerat optio hic sapiente eveniet neque dolorum eligendi pariatur possimus aliquid minus officiis mollitia quia voluptates sunt nulla est!</p>

Is it possible to change the scrollbar design with vanilla JavaScript?

1 Answers1