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.

have a look at this example -> https://jsfiddle.net/wfj4L6wL/ Taken from: https://stackoverflow.com/questions/26493446/change-size-of-scrollbar-thumb-with-css" — Dragomir Kolev, Aug 18 '17 at 11:11
if you want customize scrollbar then best solution for you is https://github.com/noraesae/perfect-scrollbar — Dmytro Lishtvan, Aug 18 '17 at 11:20

Marcelo Formentão · Accepted Answer · 2017-08-18T11:22:37.787

30

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

edited Aug 18 '17 at 11:22

answered Aug 18 '17 at 11:16

Marcelo Formentão

776
7
16

::-webkit - in ff end other browsers it doesn't work! – Dmytro Lishtvan Aug 18 '17 at 11:19
Thanks Dmitriy, I added a browser list support to the post! – Marcelo Formentão Aug 18 '17 at 11:23

score 7 · Answer 2 · answered Aug 26 '20 at 13:01

7

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

answered Aug 26 '20 at 13:01

Bharat chaudhari

484
5
7

Unable to set its height – Anjali Sharma Sep 10 '20 at 06: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. – Bharat chaudhari Oct 20 '20 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 May 11 '23 at 11:03

score 3 · Answer 3 · answered Nov 09 '21 at 09:14

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.

Scrollbar thumb height in css

3 Answers3

Linked

Related