Как использовать javascript для изменения стиля css `::webkit-scrollbar`?

ProgramBox

Как использовать javascript для изменения стиля css `::webkit-scrollbar`?

Post author:admin
Запись опубликована:12 мая, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я использую следующий метод, но он не работает:

во-первых, стиль CSS моего HTML содержит

 ::webkit-scrollbar
{
  width:12px;
}

Чтобы изменить стиль css, я создаю <style> с id = "my_sheet"
затем я использую my_sheet = document.getElementById("my_sheet").sheet; для получения таблицы стилей css.
Я использую команду sheet.addRule('::webkit-scrollbar', 'width:10px;'); , но консоль показывает

 VM1023:1 Uncaught DOMException: Failed to execute 'addRule' on 'CSSStyleSheet': Failed to parse the rule '::webkit-scrollbar { width:10px; }'.
    at <anonymous>:1:7
(anonymous) @ VM1023:1

Но этот способ работает для изменения других элементов HTML. Как правильно изменить стиль CSS для ::webkit-scrollbar

Ответ №1:

Вы можете достичь этого с помощью CSS без JavaScript

Вот обновленная скрипка:

 ::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

 <!DOCTYPE html>
<html>

<head>

</head>

<body>
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</body>

</html>

1. То, что я хочу сделать, это: при наведении курсора как на большой палец, так и на дорожку, ширину полосы прокрутки можно изменить. Но теперь я могу вызвать событие, только наведя курсор на большой палец, кажется, что я не могу изменить ширину полосы прокрутки, изменив стиль css scrollbar-track, поэтому я пытаюсь сделать это с помощью javascript… Есть ли способ лучше?

Ответ №2:

Вместо того, чтобы пытаться изменить ::webkit-scrollbar в CSS с помощью javascript (что, по-видимому, невозможно), примените его в первую очередь к вашему элементу с классом в CSS, а затем просто удалите класс из элемента с помощью classList.remove(«mystyle»)

Моей целью было создать listbox в HTML, который больше похож на listbox в Windows, а не на combobox или выпадающий список. При таком подходе список теперь работает одинаково для Firefox и Chrome — в списке нет полосы прокрутки, пока я не добавлю 6-ю опцию с помощью javascript, тогда полоса прокрутки появится в Firefox и Chrome. Вот код для примера:

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