Масштабировать элемент при увеличении - HTML / CSS

Question

У меня есть полоса прокрутки, высота которой составляет 31,25em. Теперь это выглядит хорошо, как на экране, но если я увеличу масштаб с помощью веб-браузера, например, со 100% до 110%, полоса прокрутки, кажется, увеличится в размере. У меня вопрос, как масштабировать полосу прокрутки, чтобы она выглядела правильно после увеличения?

.scrollText{

   max-height: 31.25em;
   overflow: auto;
   padding-right: 1em;
   padding-bottom: 2em;
 }

Answer 1

Изменение размера полосы прокрутки с помощью медиа-запросов и элемента webkit полосы прокрутки

Основы c Введение

Во-первых, в большинстве браузеров полоса прокрутки при масштабировании остается одинаковой в. Однако, если вы хотите изменить размер полосы прокрутки, вы, вероятно, можете использовать медиазапросы и элемент полосы прокрутки CSS, чтобы уменьшить размер полосы прокрутки при увеличении масштаба.

Предлагаемое решение

Вероятно, вы можете использовать что-то вроде этого:

@media only screen and (min-width:150px) and (max-width:600px){
   body::-webkit-scrollbar {
     width: 1em;
   }
}

Другие ресурсы

См. здесь для получения дополнительной информации чтение размера полосы прокрутки и здесь для получения дополнительной информации о медиа-запросах