Как изменить ::webkit-scrollbar на JavaScript?

Question

[DonTraffic]

Как изменить ::webkit-scrollbar у страницы через JavaScript? Не у отдельного блока, а именно страницы.

Answer 1

[Кирилл Молчанов]

До псевдоэлемента нельзя достучаться через JavaScript.
Значит, единственным выходом является написание класса в css и присвоение его к body.

Не у отдельного блока, а именно страницы.

Для справки, ::webkit-scrollbar = body::webkit-scrollbar

Comments

[DonTraffic]

а если значение стиля, которое нужно применить, динамическое? Допустим сделать доп.стиль к которому будет присвоено динамическое значение ширины. Как этот стиль потом применить к псевдоклассу webkit-scrollbar? Или как то по другому?

[Кирилл Молчанов]

Дмитрий Уханов, можно задать ширину в css кастомным свойством

body::-webkit-scrollbar{
    width: var( --scrollbar-width );
}

и через JS задавать этому свойству значение

document.body.style.setProperty("--scrollbar-width", "20px");

[DonTraffic]

Кирилл Молчанов, Огромное спасибо, но ещё можешь подсказать как вместо 20px подставить var (например с названием valueScrollbar)

[Кирилл Молчанов]

Дмитрий Уханов, если в переменной число, тогда

document.body.style.setProperty("--scrollbar-width", valueScrollbar + "px");

или

document.body.style.setProperty("--scrollbar-width", `${valueScrollbar}px`);

[lindon0390]

Спасибо большое) уже несколько часов пытаюсь найти простой способ изменить значения в псевдоэлементе) хорошо хоть заглянул сюда в коменты

Answer 2

[Pashok Doom]

Вставь в body style с нужными стилями, например

Comments

[DonTraffic]

через body, webkit-scrollbar не работает

[Lord_Dantes]

Дмитрий Уханов, добавьте класс нужному элементу через js, а классу стили

[DonTraffic]

Slava, Тут, вроде как, нет элемента.

[Lord_Dantes]

Дмитрий Уханов, к body или html пробовали?

[DonTraffic]

Slava, так не срабатывает, может надо как-то по другому?

document.getElementsByTagName('html')[0].style.webkitScrollbarWidth = "10";

[Programiker]

нет