Как изменить высоту большого пальца полосы прокрутки?

Question

Есть ли способ изменить высоту полосы прокрутки до фиксированной высоты и соответственно изменить количество прокручиваемого содержимого?Это мой текущий код CSS.

  ::-webkit-scrollbar {
    width: 30px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #003B7C; 
    border-radius: 10px;
    background: white;
    border-left: 8px solid rgba(255,255,255,0);
    border-right: 8px solid rgba(255,255,255,0);
    background-clip: content-box;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right,#003B7C, #00538B, #83BBE6); 
    border-radius: 8px;
}

Answer 1

https://jsfiddle.net/j6gmobuz/6/

.visible-scrollbar::-webkit-scrollbar-thumb {
    background-color: #acacac;
    border-radius: 50px;
    height: 120px;
}

Мне удалось частично контролировать высоту большого пальца прокрутки, просто используя свойство высоты в ":: - webkit-scrollbar-thumb".Кажется, это минимальное значение высоты, которое я не смог установить под ним новое значение.

Возможно, это могло бы помочь.

Answer 2

Высота полосы прокрутки не о ":: - webkit-scrollbar", она о высоте содержимого.Вы должны указать «max-height» и «overflow-y» для вашего контента.Вы не можете определить высоту для вертикальной полосы прокрутки.Это зависит от размера контента.

Допустим, у вас есть такая вещь:

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat adipisci itaque beatae quisquam corporis. Eos praesentium temporibus autem assumenda enim aspernatur culpa, esse quam, optio, molestias dolor sapiente vel deserunt!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit provident illo placeat nemo sint dolores quod temporibus, doloremque repudiandae, cum architecto, nostrum aut ipsum atque. Aspernatur autem error unde praesentium!</p>
</div>

Если вы напишите CSS так:

.wrapper {
    width: 300px;
    max-height: 200px;
    overflow-y: scroll;
}

, вы можете указатьвысота.

Смотрите это codepen .