Instead of trying to change ::webkit-scrollbar in the CSS using javascript (which is apparently not possible), apply it to your element in the first place with a class in the CSS, and then just remove the class from the element using classList.remove("mystyle")
My aim was to create a listbox in HTML that works more like a listbox in Windows, rather than a combobox or dropdown. With this approach the listbox works the same for Firefox and Chrome now -- there's no scrollbar in the listbox until I add the 6th option with javascript, then the scrollbar appears in Firefox and Chrome.
Here's the code for an example:
<html>
<head>
<style>
#mySelect {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.sbar::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0
}
</style>
</head>
<body>
<h3>Demonstration of a cross-browser method to make the scrollbar appear and disappear via javascript</h3>
<select id="mySelect" class="sbar" size="5">
<option>Chevy</option>
<option>Dodge</option>
<option>Jeep</option>
</select>
<p>Click the button to get the number of option elements found in a drop-down list.</p>
<button onclick="myFunction()">Count</button>
<br/>
<button id="my" onclick="myFunction2()">Add element</button>
<br/>
<button id="my2" onclick="myFunction3()">Remove element</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").length;
document.getElementById("demo").innerHTML = x;
}
function myFunction2() {
var y = document.getElementById("mySelect") ;
var opt = document.createElement("option");
opt.text = "Tesla";
y.add(opt);
if (y.length > 5) {element = document.styleSheets[0].cssRules[0].style;
element.removeProperty('scrollbar-width');
y.classList.remove("sbar");
}
}
function myFunction3() {
var y = document.getElementById("mySelect") ;
var ol = y.length
y.remove(y.selectedIndex);
if (ol == 6) {element = document.styleSheets[0].cssRules[0].style;
element.setProperty('scrollbar-width','none');
y.classList.add("sbar");
}
}
</script>
</body>
</html>
