Цвет полосы прокрутки в Opera
Я пытаюсь изменить цвет фона вертикальной полосы прокрутки в div, поэтому в моем приложении реагирования она не должна быть белой в темном режиме.
Ни одно из решений стилизации на основе веб-кита, которые я смог найти, не работало в Opera. Я также не смог найти способ с пакетом react-custom-scrollbars-2. Меня устроит любое решение, будь то CSS или JavaScript.
Вот песочница, в которой можно поиграть.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это можно сделать с помощью самой стилизации webkit.
:root {
--bg-color: #282c34; // here set a variable to represent the bg color
}
body {
background-color: var(--bg-color); // use the pre-defined color variable
color: white;
}
//override the scrollbar
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: var(--bg-color); //here set scrollbar bg-color
}
::-webkit-scrollbar-thumb {
background: #888; // here you can set scrollbar thumb color
}
Стилизация полос прокрутки всегда кажется не такой уж простой задачей. Лично я всегда предпочитаю -webkit-scrollbar и -webkit-scrollbar-thumb для реализации этого.
Вот CSS для того же:
::-webkit-scrollbar {
width: 20px;
/* background-color: #custom_bg_color; */
}
::-webkit-scrollbar-thumb {
background-color: #6d6d6d;
/* border-radius: 10px; */
/* height: 20px; */
}
Это работает! Но если я уберу первое правило, второе не будет работать. Почему я не могу изменить цвет фона без изменения ширины?
Также, в отличие от стандартного, не отображаются стрелки по краям полосы прокрутки, а большой палец занимает всю ширину полосы прокрутки. Могу ли я сделать стрелки видимыми и сделать большой палец узким, сохраняя при этом полосу прокрутки широкой?
Решение проблемы узкого большого пальца: stackoverflow.com/a/16829330/2725810
Решение проблемы со стрелкой: stackoverflow.com/a/66050759/2725810
Насколько я знаю, чтобы большой палец работал, у вас должна быть определенная (настраиваемая) ширина полосы прокрутки.
Ссылки, которые вы предоставили, работают нормально. Просто предложение: всегда проще сохранять минимальные свойства для стиля полосы прокрутки, поскольку через некоторое время становится сложно отлаживать/изменять стиль, поскольку они сильно взаимозависимы.
Вопрос про Оперу, которая не поддерживает
-webkit-scrollbar. Я попробовал поместить это в песочницу, но это не имело никакого значения.