17

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.

4

4 Answers 4

33

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 */ }

css-tricks

enter image description here

Source

2
  • ::-webkit - in ff end other browsers it doesn't work! Commented Aug 18, 2017 at 11:19
  • Thanks Dmitriy, I added a browser list support to the post! Commented Aug 18, 2017 at 11:23
9

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;
   }
4
  • Unable to set its height Commented Sep 10, 2020 at 6:17
  • 3
    @AnjaliSharma you can set min-height but not height. scrollbar adjusts its height by data. so if a lot of data then you'll see a small scrollbar else if data increases height decreases. Commented Oct 20, 2020 at 13:18
  • 1
    This is working perfectly fine. Setting min-height will give you desired you want for scrollbar thumb even if you have huge amount of data. It will adjust the content and scrolling speed accordingly.
    – mrsagar105
    Commented May 11, 2023 at 11:03
  • It does not work on Chrome. Commented Oct 19, 2023 at 22:12
2

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.

1
  • 1
    It confuses the users because it seems the content scroolign is not finished. Commented Oct 19, 2023 at 22:13
0

Don't waste your time, i already wasted on this small thing.

For accessibility reasons, you can only change the width and color of the thumb and track, but not the height, of a scrollbar. The thumb represents the current position within the scrollable region. As you scroll, it moves within the track. The thumb is often also draggable.

Source Offical Chrome Docs Read Me

And one good news for you, if you increase height of element on which scrollbar is coming then thumb of scrollbar height will automatically will decrease. So height of scrollbar is depends on the height of the element in which scrollbar is present. I hope i added some value in your life. Good Day and happy coding life !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.