Scrollbar thumb height in css

Question

Is the height of scroll thumb set as default according to scroll-able area? If not, can I set scrollbar thumb height? If it is possible how? I tried to do it the following way.

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
  height: 5px;
}

But it have no impact on the page. Please help. Thanks in advance.

Answer 1

I don't think so, the height of the thumb is based in the size of content, you can change the width inside the ::-webkit-scrollbar but the height will always be based on the content.

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Source

Answer 2

If you want to set fixed min height to the scrollbar thumb even when scroll. we can set like below:

::-webkit-scrollbar-thumb {
    min-height: 40px;
   }

Answer 3

You can do this:

::-webkit-scrollbar-thumb{
    background-color: transparent;
    border-top: 60px solid green /*or any height and color you want*/;
}

that will make the height constant with value of 60px, but pay attention that it will not be able scroll to the very end because of the transparent space.