Почему не работаю стили прокрутки?

Question

[Дмитрий]

Не хочет меняться полоса прокрутки элемента в Хроме. Почему? При этом стили даже не видны в панели разработчика.

.b-tabs__links::-webkit-scrollbar {
  width: 12px;               /* ширина всей полосы прокрутки */
}

.b-tabs__links::-webkit-scrollbar-track {
  background: orange;        /* цвет зоны отслеживания */
}

.b-tabs__links::-webkit-scrollbar-thumb {
  background-color: blue;    /* цвет бегунка */
  border-radius: 20px;       /* округлось бегунка */
  border: 3px solid orange;  /* отступ вокруг бегунка */
}

Comments

[serega danet]

Это старый синтаксис. Недавно , со 121 хром , все поменяли и привели к общему виду. Все как-то проще и понятнее. Этот синтаксис со временем уйдет.
Я при широкой анимации отключаю скролы, прокрутка сохраняется. Никто еще не жаловался

[Дмитрий]

serega danet, А какой новый?

[serega danet]

Дмитрий, стандартно. Например здесь https://developer.mozilla.org/en-US/docs/Web/CSS/C...
Старый синтаксис типа псевдоэлементов - все.

[Дмитрий]

serega danet, Большое спасибо. Помогло scrollbar-width: none;. Убрал вообще полосу скролла. Можете сформировать ответ и я отмечу его решением.

[serega danet]

Дмитрий, я все это походил. Эти псевдоэлементы из вашего примера еще не все, там вендорные префиксы еще были для -ms- -moz- , которые даже между собой вообще не похожи.
Встречал уже код для удаления всех этих префиксов, обратный тому, что был много лет назад для их установки. MS типа для IE уже давно похоронен. Осталась MOZ , Она уже прекрасно понимает все(большинство) -webkit- без дополнительной помощи. Теперь это их проблема, а не общего CSS.

[serega danet]

Дмитрий, scrollbar-width: none;.
я тоже всегда стараюсь это прописывать. Особенно в в свете того, что браузеры до сих пор не понимают, что скролы должны быть наложены сверху. EDGE с появлением скрола на странице смещает ее центр , это просто кошмар как выглядит. Может надо прописывать еще дополнительно display: none или visible для скролов, видел даже смещение скролов на 17px наружу страницы. Все эти методы борьбы со скролами -- это уже старое, нет смысла вспоминать.
Но EDGE просто убил, обновляется каждые 3 дня , но программеров найти не могут. Это же очевидно, что тольь наложение сверху. Vivaldi хоть и кладет на своих юзееров , целый форум но всем жалобам больше 5 лет -- но он хоть скролы правильно рисует.
scrollbar-width: none;. -- снимает все проблемы. Прокрутка на месте. Минимализм не оскорблен.

Answer 1

[serega danet]

с начала 2024 года с выходом Chromium121 введен новый синтаксис для стилизации scrollbar caniuse.com. Этот новый синтаксис приведен к общим стандартам CSS. Применять псевдоэлементы к скролл-барам необходимости нет.
Стандартный синтаксис для скролл-баров с 2024 года -- developer.mozilla.org

Answer 2

[Сергей delphinpro]

Работает

Comments

[Дмитрий]

Почему у меня не работает. Может что-то перебивать?

[Дмитрий]

Посмотрите https://polarspa.ru/kupel-polarspa-elite-220.html

[serega danet]

width: 12px;
ваши коллеги уже доигрались у тонкие скроллы. Где работают коллеги ? Просто в Google .
В редакторе YT уже не попасть в скролы, передвинуть окно нельзя.
Наверное, на Хабре набирали. И 12 это минимум