Есть ли способ изменить стиль скроллера по умолчанию для редактора реагирующих программ?

Question

Я создаю веб-страницу, на которой редактор реагирует на 50% ширины страницы и 90% высоты страницы.После того, как у редактора есть вертикальный скроллер для написания некоторого кода, я хочу стилизовать показанный по умолчанию вертикальный скроллер.

Я могу получить экземпляр редактора, используя -

const reactAceComponent = this.refs.reactAceComponent;
const editor = reactAceComponent.editor;

, поставив activAceComponentref on Editor.

И после этого я могу изменить высоту, ширину и ширину скроллера и т. д. Но как мне оформить стиль самого скроллера?

Предположим, я хочу придать скроллеру стиль "стиль"-scroller "и сделайте что-то вроде этого:

#style-scroller::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-scroller::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-scroller::-webkit-scrollbar-thumb
{
    background-color: #3366FF;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(0deg,
                                              rgba(255, 255, 255, 0.5) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, 0.5) 50%,
                                              rgba(255, 255, 255, 0.5) 75%,
                                              transparent 75%,
                                              transparent)
}

Можно ли назначить пользовательский стиль скроллеру?Где я могу начать?Пожалуйста, помогите мне.

Answer 1

Вы можете использовать .ace_scrollbar класс для нацеливания полос прокрутки в тузе и .ace_scrollbar-v, .ace_scrollbar-h для нацеливания только на вертикальные или горизонтальные полосы прокрутки (но псевдо-класс :horizontal тоже подходит для этого).

Более простая альтернатива, которая используется в облаке9 https://github.com/c9/core/blob/c4d1c59dc8d6619bdca3dbe740291cd5cd26352c/plugins/c9.ide.ace/scrollbar.js#L22, использует только ::-webkit-scrollbar для нацеливания на все полосы прокрутки