How to change the height of a scrollbar thumb?

Question

Is there any way to change the height of a scrollbar to a fixed height and change the amount of content scrolled accordingly? This is my current css code.

  ::-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;
}

I was able to partly control the height of the scroll thumb by simply using height property on "::-webkit-scrollbar-thumb". It appears to be minimum height value which I wasn't able to set a new value below it.

Maybe this could help.

Answer 2

Scrollbar height is not about "::-webkit-scrollbar", it's about content height. You must give "max-height" and "overflow-y" to your content. You can't define height for a vertical scrollbar. That is dependent on content size.

Let's say you have a thing like this:

<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>

If you write CSS like this:

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

you can specify height.

Look this codepen.