Пользовательская полоса прокрутки CSS для разных операционных систем и браузеров. ⇐ CSS

[Anonymous]

Я нашел аналогичный вопрос, где указаны реально работающие подходы по исправлению отображения полосы прокрутки в Firefox и Chrome.
Однако в других системах, особенно в Windows 11 для Firefox (125) , эта полоса прокрутки ведет себя по-другому, из-за чего становится неясно, можно ли прокручивать сегмент.
(Скриншоты прикреплены в конце)
Проблемы поведения для Windows 11 (там есть могут быть и другие системы с похожей проблемой, но другие не проверялись):

• Ползунок прокрутки появляется при наведении курсора на элемент, в котором он должен находиться находится
• Фон ​​для полосы прокрутки не отображается
• Более или менее нужный вид можно получить только нажав на ползунок прокрутки
  li>

Есть ли возможные решения проблемы? В статье на Хабре рассказывают о специальных настройках по умолчанию специально для Windows 11 + Firefox Всегда показывать полосы прокрутки, но можно ли установить нужные стили независимо от этой настройки?
На Windows 10 версиях обоих Firefox и Chrome следующий код работает должным образом.

Код: Выделить всё

@supports (scrollbar-color: auto) and (not selector(::-webkit-scrollbar)) {
ul {
scrollbar-color: #bebebe #eaeaea;
scrollbar-width: thin;
}
}

ul::-webkit-scrollbar {
width: 2px;
height: 2px;
background: #eaeaea;
}

ul::-webkit-scrollbar-thumb {
background: #bebebe;
border-radius: 2px;
border: none;
}

На первом фото нет мыши на элементе ul
[img]https://i .sstatic.net/t3xhRWyf.png[/img]

На второй фотографии я навел курсор мыши на элемент ul и получил ползунок
< img alt="Идет наведение" src="https://i.sstatic.net/65PNEx9B.png" />
На третьем фото дергаю ползунок< /p>


Четвертое фото показывает ожидаемый результат (по умолчанию)



Подробнее здесь: https://stackoverflow.com/questions/785 ... d-browsers