Как можно изменить высоту полосу прокрутки с помощью CSS?

Question

[Миржалол Мирхомитов]

Доброго времени.
На сайте создал полосу прокрутки для блока

У меня не получается уменьшит высоту полосы скрола.
Пробовал:

::-webkit-scrollbar {
height: 10px;
max-height: 10px;
}
::-webkit-scrollbar-thumb {
height: 10px;
max-height: 10px;
}

Но изменит не получилось. Ширину изменить получилось, а высоту нет. В CSS это можно реализовать?

Answer 1

[Сергей delphinpro]

Никак нельзя.
А зачем вам ее менять? Никто никогда этого не делает. Даже в кастомных скроллбарах она автоматом рассчитывается.

Comments

[Миржалол Мирхомитов]

Хотел сделать по меньше. Она у меня очень высокая. Скриптами тоже никак да или можно?

[v3shin]

Михаил Миронов, полоса прокрутки всегда подходящего размера. Но вы можете написать свой скроллбар с фиксированной высотой.

[Миржалол Мирхомитов]

v3shin, понятно спасибо

[Сергей delphinpro]

Михаил Миронов, она обратно пропорциональна количеству прокручиваемого контента. Это привычное поведение для пользователей во всех программах. Зачем что-то менять?

[Миржалол Мирхомитов]

Сергей delphinpro, Хотел сделать по меньше. Она у меня очень высокая.

Answer 2

[strelok011]

Системный скроллбар изменить не получится, это за пределами области документа.
Разные браузеры могут предоставлять урезанные и не совпадающие по изменяемым свойствам вендорные хаки.
Для полного управления внешним видом скроллба можно использовать решения, опирающиеся на атрибуты overflow для body и контейнеров в html + js для позиционирования своего сверстанного бегунка с произвольными параметрами.
Если есть желание всё это использовать - есть готовые решения типа https://grsmto.github.io/simplebar/
Но нужно иметь в виду, что такое решение может сломаться в каких-либо непредвиденных разработчиками условиях, в отличие от системного скролла.
Вердикт - полное извращение )

Answer 3

[omnesmorimurq]

Я делал себе через такой костыль.

::-webkit-scrollbar {
  width: 10px;
  background-color: black; 
}

::-webkit-scrollbar-thumb {
  background: <--сюда вставляем цвет фона нашей страницы
  background: linear-gradient <--сюда вставляем градиент который состоит из 3х или 5 цветов, где первый и последний должен быть цветом фона вашей страницы 
}

Фактическую высоту скроллбара это не поменяет, но визуально может помочь